@charset "utf-8";

/**
 * @author  :   lh
 * @created :   2022/01/04
 * @desc    :   文丰网校
 *
 * @update  :   
 * @modify  :   
 */

.zb_list_detail {
	width: 130px;
	height: 30px;
	line-height: 30px;
	float: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}

.tk_list {
	line-height: 24px;
}

.tk_list_main {
	display: flex;
	align-items: center;
}

.zb_boxs {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	opacity: 1;
	border-radius: 0px;
	position: fixed;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}



.kc_top {
	width: 276px;
	/*height: 110px;*/
	height: 60px;
	background: #FFFFFF;
	margin-bottom: 32px;
}

.kc_top .kc_tit {
	font-weight: 400;
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.box-top{
	margin-top: 24px!important;
}


.kc_top .small_tit {
	margin-top: 8px;
}

.kc_top .ks {
	margin-top: 16px;
}

.kc_tit_list {
	width: 276px;
	height: 28px;
	background: rgba(0, 0, 0, 0.04);
	line-height: 28px;
	margin-bottom: 16px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;

}

.kc_tit_list span {
	margin-left: 8px;
}

.kc_tit_list .icon-drop-right {
	float: right;
	font-size: 28px;
}



.topiv-list-box ul li:hover {
	background: #FFFFFF !important;
	transform: translateY(-1px) !important;
	box-shadow: 0px 8px 16px var(--hover_shadow_color) !important;
}

.yy_boxs {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	opacity: 1;
	border-radius: 0px;
	position: fixed;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}


.yy_boxs .box {
	width: 559px;
	height: 356px;
	background: #ffffff;
	box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
	opacity: 1;
	border-radius: 8px;
}

.yy_boxs .box .box_left {
	margin: 71px 56px 75px 88px;
	width: 144px;
	height: 184px;
	/* background: #0066CC; */
	float: left;
}

.yy_boxs .box .box_right {
	margin: 85px 75px 24px 0px;
	/* width: 183px; */
	/* height: 53px; */
	/* background: #00aaff; */
	float: right;
}

.yy_btn {
	width: 105px;
	height: 32px;
	border: 1px solid #863032;
	opacity: 1;
	border-radius: 16px;
	margin-top: 24px;
	color: rgba(134, 48, 50, 1);
	font-weight: 400;
	text-align: center;
	line-height: 32px;
}

.box .box_left img {
	padding: 5px;
	border: 1px solid rgba(0, 0, 0, 0.08);
}






.zb_boxs .box {
	width: 559px;
	height: 356px;
	background: #ffffff;
	box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
	opacity: 1;
	border-radius: 8px;
}

.zb_boxs .box .box_left {
	margin: 71px 56px 75px 88px;
	width: 144px;
	height: 184px;
	/* background: #0066CC; */
	float: left;
}

.zb_boxs .box .box_right {
	margin: 117px 88px 159px 0px;
	width: 183px;
	/* height: 53px; */
	/* background: #00aaff; */
	float: right;
}

.box .box_left img {
	padding: 5px;
	border: 1px solid rgba(0, 0, 0, 0.08);
}



.zz_boxs {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	opacity: 1;
	border-radius: 0px;
	position: fixed;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.zz_boxs .box {
	width: 680px;
	height: 376px;
	background: #ffffff;
	box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
	opacity: 1;
	border-radius: 8px;
}

.zz_end .box .box_top i {
	float: right;
}


.zz_end {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	opacity: 1;
	border-radius: 0px;
	position: fixed;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.zz_end .box {
	width: 500px;
	height: 359px;
	background: #ffffff;
	box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
	opacity: 1;
	border-radius: 8px;
}

.zz_end .box .box_bottom img {
	width: 258px;
	height: 190px;
	margin: 40px 121px 24px 121px;
}

.zz_end .box .box_bottom .end_tit_all {
	margin: 0px 139px 56px 145px;
	text-align: center;
}

.zz_end .box .box_bottom .end_tit_success {
	margin: 0px 183px 56px 189px;
}

.zz_end .box .box_bottom .end_tit_fail {
	margin: 0px 121px 56px 128px;
	text-align: center;
}


.box .box_bottom {
	float: left;
}

.box .box_bottom .bottom_box_left {
	width: 240px;
	height: 240px;
	/* background: pink; */
	float: left;
	margin: 45px 36px 64px 80px;
	border: 1px solid rgba(0, 0, 0, 0.16078431372549018);
	opacity: 1;
	border-radius: 8px;
	cursor: pointer;
}


.box_bottom .bottom_box_left:hover {
	border: 1px solid #863032;
	box-shadow: 0px 8px 16px rgba(134, 48, 50, 0.2);
}

.box_bottom .bottom_box_left:hover .more_box {
	background: #863032;
}

.box_bottom .bottom_box_left:hover .more_box1 {
	background: #863032;
}



.bottom_box_left .more_box {
	width: 57px;
	height: 24px;
	background: rgba(134, 48, 50, 0.16);
	opacity: 1;
	border-radius: 4px;
	margin: 40px 91px 9px 92px;

}

.bottom_box_left .more_box1 {
	width: 57px;
	height: 24px;
	opacity: 1;
	background: rgba(134, 48, 50, 0.16);
	margin: 0 91px 40px 92px;
	border-radius: 4px;
}

.bottom_box_left .dt_tit {
	width: 73px;
	height: 24px;
	font-size: 18px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	line-height: 0px;
	color: rgba(0, 0, 0, 0.8);
	/* letter-spacing: 20px; */
	opacity: 1;
	margin: 0 83px 24px 84px;
}

.bottom_box_left .detail_tit {
	width: 196px;
	height: 16px;
	font-size: 12px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	line-height: 0px;
	color: rgba(0, 0, 0, 0.3);
	/* letter-spacing: 20px; */
	opacity: 1;
	margin: 0 22px 39px 22px;
}


.box .box_bottom .bottom_box_right {
	width: 240px;
	height: 240px;
	/* background: blue; */
	float: right;
	margin: 45px 80px 64px 0;
	border: 1px solid rgba(0, 0, 0, 0.16078431372549018);
	opacity: 1;
	border-radius: 8px;
	cursor: pointer;
}


.bottom_box_right .more_box {
	width: 57px;
	height: 24px;
	background: rgba(134, 48, 50, 0.16);
	opacity: 1;
	border-radius: 4px;
	margin: 40px 91px 7px 92px;
}

.bottom_box_right .small_more_box {
	width: 57px;
	height: 10px;
	opacity: 1;
	background: rgba(134, 48, 50, 0.16);
	opacity: 1;
	border-radius: 4px;
	margin: 0 91px 6px 92px;
}

.bottom_box_right .small_more_boxs {
	width: 57px;
	height: 10px;
	opacity: 1;
	background: rgba(134, 48, 50, 0.16);
	opacity: 1;
	border-radius: 4px;
	margin: 0 91px 40px 92px;
}


.bottom_box_right .dt_tit {
	width: 73px;
	height: 24px;
	font-size: 18px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	line-height: 0px;
	color: rgba(0, 0, 0, 0.8);
	/* letter-spacing: 20px; */
	opacity: 1;
	margin: 0 83px 24px 84px;
}

.bottom_box_right .detail_tit {
	width: 196px;
	height: 16px;
	font-size: 12px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	line-height: 0px;
	color: rgba(0, 0, 0, 0.3);
	/* letter-spacing: 20px; */
	opacity: 1;
	margin: 0 77px 39px 78px;
}


.box_bottom .bottom_box_right:hover {
	border: 1px solid #863032;
	box-shadow: 0px 8px 16px rgba(134, 48, 50, 0.2);
}

.box_bottom .bottom_box_right:hover .more_box {
	background: #863032;
}

.box_bottom .bottom_box_right:hover .small_more_box {
	background: #863032;
}

.box_bottom .bottom_box_right:hover .small_more_boxs {
	background: #863032;
}


.closes i:hover {
	cursor: pointer;
	color: #863032;
}



.kc_active {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}

.video_state {
	width: 52px;
	height: 24px;
	background: rgba(145, 30, 33, 0.6);
	opacity: 1;
	border-radius: 12px;
	color: #FFFFFF;
	text-align: center;
	line-height: 24px;
	font-weight: 600;
	position: absolute;
	z-index: 666;
	right: 40px;
	top: 32px;
}

.video_logo {
	width: 120px;
	height: 32.94px;
	position: absolute;
	top: 32px;
	left: 40px;
	z-index: 666;
	opacity: 0.8;
}

.closes i {
	margin: 8px !important;
	font-size: 20px;
}

.box .box_top {
	width: 100%;
	float: left;
	height: 30px;
	/* background: #0000FF; */
}

.box .box_top .tit {
	float: left;
	margin: 8px 16px;
}

.box .box_top .close {
	float: right;
}

/* .zz_boxs #questionBox {
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
} */



.kc_tit {
	/* width: 480px !important; */
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.gm_video_tit {
	/* margin-top: 24px; */
	line-height: 27px;
}

.dwn_btn:hover {
	cursor: pointer;
}

.dwn_btn {
	width: 80px;
	height: 24px;
	background: #863032;
	opacity: 1;
	border-radius: 4px;
	float: right;
	text-align: center;
	line-height: 24px;
	color: #FFFFFF;
}

.list_video_main {
	/*height: 375px !important;*/
}

.ks_list_box {
	padding: 24px !important;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* .ks {
	margin-bottom: 26px;
} */

.ks_list {
	line-height: normal !important;
	margin-bottom: 16px;
	/* display: flex;
	align-items: center;
	position: relative; */
}


.children-wrap li a .node-num:hover i {
	color: #863032;
}

.children-wrap li a .node-num:hover .text-dark {
	color: #863032;
}

.children-wrap li .clearfix .node-num a:hover i {
	color: #863032;
}

.children-wrap li .clearfix .node-num a:hover .node-word {
	color: #863032;
}

.clearfix .node-num .wgm:hover .node-word {
	color: rgba(0, 0, 0, 0.6) !important;
}

.clearfix .node-num .wgm:hover i {
	color: rgba(0, 0, 0, 0.6) !important;
}


.zb_active {
	display: none;
}

.course_name {
	color: rgba(0, 0, 0, 0.6);
}

.right_rq {
	display: flex;
}

.course_tit {
	color: rgba(0, 0, 0, 0.8);
}

.lb_box {
	width: 34px;
	height: 18px;
	background: #819DCC;
	opacity: 1;
	border-radius: 4px;
	display: inline-block;
	margin: 5px;
	text-align: center;
	line-height: 18px;
	color: #FFFFFF;
	font-size: 12px;
}

.zb_box {
	display: inline-block;
	width: 34px;
	height: 18px;
	background: rgba(134, 48, 50, 0.3);
	border: 1px solid rgba(134, 48, 50, 0.6);
	opacity: 1;
	border-radius: 4px;
	text-align: center;
	line-height: 18px;
	color: #863032;
	font-size: 12px;
	margin: 3px;
}

.online_box {
	margin: 0;
	/* height: 88px; */
	opacity: 1;
	display: flex;
	flex-direction: column;
	/* padding-bottom: 16px; */
}

.online_box .on_box_top {
	width: 100%;
	height: 30px;
	line-height: 30px;
	margin-top: 8px;

}

.online_box .on_box_bottom {
	width: 100%;
	/* height: 58px; */
}

.small_box div li {
	width: 100%;
	height: 290px;
	overflow: hidden;
	box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
	opacity: 1;
	border-radius: 8px;
	float: left;
	position: relative;
}

.small_box_text_box {
	float: left;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.small_box_text_box .text_box_top {
	width: 100%;
	height: 80px;

	display: flex;
	/* justify-content: center; */
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 0 16px;
	box-sizing: border-box;


}

.small_box_text_box .text_box_top .box_top_p {
	/* width: 90%; */
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.small_box_text_box .text_box_bottom {
	width: 100%;
	height: 84px;
	display: flex;
	justify-content: center;
	align-items: center;


}

.small_box_text_box .text_box_bottom .bottom_small {
	/* width: 90%; */
	/* height: 84px; */
	/* margin: 5%; */
	/* background: #0066CC; */
	width: 100%;
	display: flex;
	flex-direction: column;

}

.text_box_bottom .bottom_small .bottom_top {
	width: 100%;
	height: 40px;
	display: flex;
	/* justify-content: center; */
	align-items: center;
	color: rgba(0, 0, 0, 0.8);
	margin-top: 5px;
	margin-left: 16px;

}

.text_box_bottom .bottom_small .bottom_top p {
	color: rgba(0, 0, 0, 0.8);

}

.text_box_bottom .bottom_small .bottom_top .kc-Money {
	text-align: left;

}

.bottom_small .bottom_top span font {

	font-size: 20px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	margin-left: -5px;

}

.text_box_bottom .bottom_small .bottom {
	width: 100%;
	height: 34px;
	font-size: 12px;

}

.bottom_small .bottom .bottom_left {
	flex: 1;
	height: 34px;
	float: left;
	color: rgba(0, 0, 0, 0.6);
	display: flex;
	/* align-items: center; */
	justify-content: flex-start;
	text-decoration: line-through;
	margin-left: 16px;

}

.text_box_bottom .bottom_small .bottom .bottom_right {
	flex: 1;
	height: 34px;
	float: right;
	display: flex;
	/* align-items: center; */
	justify-content: flex-end;
	color: rgba(0, 0, 0, 0.6);
	margin-right: 16px;

}

.item-pic .state_box {
	position: absolute;
	z-index: 10;
	width: 79px;
	height: 29px;
	top: 0;
	right: 0;
}

.ls_course-box {
	margin-bottom: 24px;
}

.rm {
	margin-top: 40px;
}

.kc-Money {
	text-align: right;
	flex: 1;
}

.ls_kc_name {
	width: 240px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ls_mf_name {
	font-size: 12px;
	/* margin-right: 5px; */
	position: absolute;
	right: 20px;
}

.item-desc-word {
	color: rgba(0, 0, 0, 0.6);
}

.classify-item {
	margin-bottom: 20px;
}

.classify-item:last-child {
	margin-bottom: 0;
}

.select-txt {
	width: 28px;
	line-height: 35px;
}

.classify-item ul {
	width: 1116px;
}

.classify-item ul li {
	float: left;
	margin-left: 32px;
	line-height: 35px;
}

.classify-item ul li.cur a {
	color: var(--main_color);
}

.classify-item ul li:hover a {
	color: var(--main_color);
}

.classify-item ul li a {
	color: rgba(0, 0, 0, 0.6);
}

.course-list .course-audition {
	width: auto;
	height: auto;
}

.course-list .course-left {
	width: 216px;
}

.course-list .course-right {
	/* width: 174px; */
	line-height: 24px;
}

.course-left ul li {
	/* width: 56px; */
	padding: 0 16px;
	line-height: 24px;
	text-align: center;
	float: left;
	cursor: pointer;
}

.course-left ul li.current {
	background-color: var(--main_bg);
	border-radius: 8px;
	color: #fff;

}

.course-right ul li {
	float: left;
	margin-right: 10px;
	line-height: 24px;
}

.course-right ul li.course-top-arrow {
	width: 53px;
	height: 24px;
	background: rgba(0, 0, 0, 0.04);
	margin-right: 0;
	position: relative;
	border-radius: 8px;
}

.course-right ul li.course-top-arrow::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 18px;
	background: rgba(0, 0, 0, 0.08);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.icon-prev-page.disabled {
	color: rgba(0, 0, 0, 0.3);
}

.course-right ul li.course-top-arrow i {
	margin: 0 3px;
	cursor: pointer;
}

/* .course-right ul li.course-top-arrow  i:hover{
    color: var(--main_color);
} */

.course-page span {
	color: var(--main_color);
	font-weight: bold;
}

.course-list .course-audition>ul {
	margin-right: -24px;
}

.course-list .course-audition>ul li {
	width: 276px;
	margin: 0 24px 24px 0;
}

/* .course-list .course-audition>ul li:nth-child(4n){
    margin-right: 0;
} */
.course-list .course-audition>ul li .item-pic {
	height: 164px;
	position: relative;
}

.course-left ul li.sort-price {
	position: relative;
	/* width: 70px; */
	padding: 0 23px;

}

span.price-ico {
	width: 8px;
	height: 16px;
	display: block;
	background: url(../img/ico/sort.png) no-repeat center;
	background-size: cover;
	position: absolute;
	/* top:50%;
    right:0;
    transform: translateY(-50%); */
	top: 5px;
	right: 10px;
}

.sort-price.sort-up span.price-ico {
	background: url(../img/ico/sort-up.png) no-repeat center;
}

.sort-price.sort-down span.price-ico {
	background: url(../img/ico/sort-down.png) no-repeat center;
}


/* ==================================================
   课程详情、课程目录
   ================================================== */
.sprint-pic {
	width: 576px;
	height: 342px;
	overflow: hidden;
	border-radius: 8px;
	margin-right: 24px;
}

.sprint-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sprint-word {
	width: 413px;
}

.spr-top {
	margin-bottom: 2px;
}

.spr-top h2 {
	font-size: 18px;
	color: rgba(0, 0, 0, 0.8);
	font-weight: normal;
	width: 320px;
}

.spr-item-word {
	overflow: hidden;
	margin-top: 8px;
}

.spr-item-word dl {
	display: flex;
	align-items: center;
}

.spr-item-word dl:nth-child(2) {
	/* margin-bottom: 62px; */
}

.spr-item-word dl i.icon-alipay {
	color: #00A6E3;
	font-size: 24px;
}

.spr-item-word dl i.icon-weichat-pay {
	color: #03B800;
	font-size: 24px;
}

.spr-item-word dl i {
	float: left;
	margin-right: 5px;
}

.spr-item-word dl span {
	margin-right: 16px;
	line-height: 36px;
}

dl.buy-btn {
	margin-top: 30px;
}

.buy-btn a {
	height: 42px;
	line-height: 42px;
	color: #fff;
	display: block;
}

.buy-btn a:nth-child(2) {
	margin-right: 0;
}

.buy-btn .buy-now {
	width: 276px;
	background: var(--main_color);
	border-radius: 8px;
	margin-right: 24px;
}

.buy-btn .buy-now:hover {
	transform: translateY(-1px);
	box-shadow: 0px 8px 16px var(--hover_shadow_color);
	cursor: pointer;
}

.buy-btn a.free-trial {
	width: 113px;
	background: rgba(134, 48, 50, 0.16);
	color: var(--main_color);
	border-radius: 8px;
}

.buy-btn a.free-trial:hover {
	cursor: pointer;
	transform: translateY(-1px);
	box-shadow: 0px 8px 16px var(--hover_shadow_color);
}

.course-cont {
	width: 826px;
}

.course-cat-tab {
	border-bottom: 1px solid #eee;
}

.course-cat-tab ul li {
	float: left;
	line-height: 32px;
	margin-right: 32px;
	cursor: pointer;
}

.course-cat-tab ul li.cur {
	color: var(--main_color);
	border-bottom: 2px solid var(--main_color);
	font-weight: bold;
}

.course-cat-item {
	padding: 24px;
	width: 790px;
	overflow: hidden;
}

.course-cat-item p {
	width: 100%;
}

.course-cat-item p img {
	vertical-align: bottom;
	width: 100%;
}

.cat-two-title {
	display: flex;
	align-items: center;
	line-height: 20px;
	padding: 12px;
}

.cat-two-title:hover {
	cursor: pointer;
	color: var(--main_color);
}

.cat-item-list {
	/*background: rgba(0, 0, 0, 0.04);*/
	border-radius: 8px;
}

.cat-item-lists:hover .cat-two-title {
	cursor: not-allowed;
	color: rgba(0, 0, 0, 0.6);
}

.cat-item-list ul {
	display: none;
}

/* .course-show-box{
    margin-bottom: 12px;
} */
.cat-item-top {
	line-height: 21px;
	margin-bottom: 24px;
}

.cat-item-top:hover {
	cursor: pointer;
	color: var(--main_color) !important;
}

.arry {
	background-color: rgba(0, 0, 0, 0.04);
	margin-bottom: 24px;
	padding: 12px;
}

.course-cat-item>img {
	max-width: 100%;
}

.course-xgtj {
	width: 326px;
	margin-left: 24px;
}

.course-xgtj .xgtj-title {
	color: rgba(0, 0, 0, 0.8);
	font-weight: bold;
	margin-bottom: 14px;
	line-height: 34px;
}

.course-xgtj ul li h3 {
	padding-left: 20px;
	font-size: 14px;
}

.course-xgtj ul li:hover h3 {
	color: var(--main_color);
}

.course-xgtj ul li h3:hover:before {
	background: var(--main_color);
}

.course-xgtj ul:hover li {
	color: red !important;
}

.course-xgtj ul li {
	margin-bottom: 20px;
}

.xgtj-item-btm {
	padding-left: 20px;
	margin-top: 6px;
}

.cat-item-top i,
.cat-two-title i {
	cursor: pointer;
	transition: linear .3s;
}

.cat-item-top .cat-item-left .cat-total {
	margin-left: 20px;
}

.cat-item-top i.cat-roate,
.cat-two-title i.cat-roate {
	transform: rotate(90deg);
	transition: linear .3s;
}

.cat-item-list {
	/*display: none;*/
}

.cat-item-list ul li {
	line-height: 44px;
	padding: 0px 24px;
}

/* .cat-item-list ul li:hover {
    background: rgba(134, 48, 50, 0.16);
} */

.cat-item-list ul li a {
	display: block;
}




.disabled {
	cursor: no-drop;
}

.node-num span:nth-child(1) {
	/* width:30px; */
	margin-left: 18px;
	display: inline-block;
}

.cat-item-list ul li .free-time {
	margin-top: 10px;
}

/* ==================================================
   课程视频播放
   ================================================== */
.course-video {
	width: 852px;
	height: 530px;
	position: relative;
	z-index: 1;
}

.course-video-side {
	padding: 4px 24px;
	width: 276px;
	height: 482px;
	overflow: hidden;
}

.course-video-side h3 {
	margin-bottom: 16px;
	color: rgba(0, 0, 0, 0.8);
	font-weight: 400;
}

.purchase {
	margin-bottom: 32px;
}

.purchase a {
	display: block;
	height: 32px;
	line-height: 32px;
	margin: 16px 0;
}

.course-video video {
	object-fit: cover;
	border-radius: 4px 0 0 4px;
}

.course-video-list ul li {
	line-height: 35px;
	cursor: pointer;
	position: relative;
}

.video-num {
	width: 16px;
	margin-right: 12px;
}

.playings {
	display: none;
	margin-right: 12px;
}

.course-video-list ul li .bg-free {
	/* margin-top: 6px; */
}

.course-video-list ul li:hover .video-node {
	color: var(--main_color);
}

.video-node.cur {
	color: var(--main_color);
}

.course-video-list ul li:nth-child(n+10) {
	/*display: none;*/
}

.course-video-list ul {
	/*height: 455px;*/
	overflow-y: scroll;
	/*overflow-y:hidden;*/
}

.course-video-list video::-webkit-media-controls.sizing-small input[pseudo="-internal-media-controls-overflow-button"] {
	display: none !important;
}
.video_left {
	width: 852px;
	display: flex;
	float: left;
	justify-content: space-between;
}
.video_left span {
	width: 56px;
	height: 24px;
	margin-right: 16px;
}

.play-word {
	margin-top: 24px;
	line-height: 24px;
}

.play-word-txt>span {
	margin-right: 16px;
}

.rel-title h2 {
	color: rgba(0, 0, 0, 0.8)
}

.rel-banner {
	height: 340px;
}

.tb-list {
	overflow: inherit;
}

.rel-banner .tb-btn {
	display: none;
}

.tb-arrow {
	height: 30px;
	background: rgba(0, 0, 0, 0.04);
	width: 50px !important;
	top: -52px !important;
	right: 0 !important;
	border-radius: 8px;
	position: relative;
}

.tb-arrow::after {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
	content: '';
	width: 1px;
	height: 16px;
	background: rgba(0, 0, 0, 0.08);
}

.tb-arrow a {
	width: 24px;
	height: 30px !important;
}

.tb-arrow a>img {
	display: none;
}

.tb-arrow a.prev {
	background: url(../img/ico/arrow_prev.png) no-repeat center;
	background-size: 80%;
}

.tb-arrow a.next {
	background: url(../img/ico/arrow_next.png) no-repeat center;
	background-size: 80%;
}

.tb-arrow a.prev:hover {
	background: url(../img/ico/arrow_prev_ac.png) no-repeat center;
	background-size: 80%;
}

.tb-arrow a.next:hover {
	background: url(../img/ico/arrow_next_ac.png) no-repeat center;
	background-size: 80%;
}


/* ==================================================
   题库中心
   ================================================== */
.topic-box .course-left ul li {
	padding: 0 16px;
}

.topic-list {
	min-height: 200px;
	/* 	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column; */
}

.topic-list .nothing {
	margin-top: 90px;
}

.topic-list ul li {
	padding: 20px 24px;
	box-sizing: border-box;
}

.topic-list ul li span {
	display: block;
	margin-right: 90px;
	float: left;
}

.topic-list ul li span.topic-item-name {
	width: 430px;
	padding-left: 20px;
}

.topic-list ul li a {
	width: 130px;
	text-align: center;
	height: 32px;
	line-height: 32px;
	border: 1px solid #eee;
	background: #FFFFFF;
}

.topic-list ul li .ico-msg {
	display: none;
}

.topic-list ul li a i {
	margin-right: 8px;
}

.topic-list ul li {
	border-bottom: 1px solid #eee;
	transition: all .3s;
}

.topic-list ul li:hover {
	background: rgba(134, 48, 50, 0.04);
	border-radius: 8px;
	border-bottom: 1px solid var(--hover_color);
	cursor: pointer;
	border-bottom: 1px solid #FFFFFF;
	/* 	transform: translateY(-1px);
	 box-shadow: 0px 8px 16px var(--hover_shadow_color); */
}

.topic-list ul li a:hover {
	border: 1px solid var(--main_color);
	color: var(--main_color);
	/* box-sizing: border-box; */
	cursor: pointer;
}

.topic-list ul li .topic-dashed {
	display: none;
}

.topic-list.topic-list-block ul li {
	float: left;
	width: 276px;
	height: 236px;
	padding: 32px 24px;
	box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
	margin-right: 24px;
	position: relative;
	margin-bottom: 24px;
	border-radius: 8px;
	box-sizing: border-box;
}

.topic-list.topic-list-block ul li:nth-child(4n) {
	margin-right: 0;
}

.topic-list.topic-list-block ul li .ico-msg {
	width: 113px;
	height: 36px;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}

.topic-list.topic-list-block ul li span {
	margin-right: 0;
	padding-left: 0;
}

.topic-list.topic-list-block ul li span.topic-item-name {

	width: 100%;
	float: none;
}

.topic-list.topic-list-block ul li .topic-center {
	margin-top: 50px;
	float: none;
	display: flex;
	justify-content: space-between;

	width: 100%;
	float: none;
	/* height: 45px; */
	line-height: 22.5px;
}



.topic-list.topic-list-block ul li a {
	float: none;
	margin: 16px auto 0;
	display: block;
}

.topic-list.topic-list-block ul li .topic-dashed {
	display: block;
	height: 1px;
	background: #eee;
	/* margin: 24px 0; */
	margin-top: 24px;
}



/* ==================================================
   做题
   ================================================== */

.answer-side {
	width: 276px;
	position: fixed;
}

.answer-list {
	width: 876px;
}

.countdown-box {
	position: relative;
	padding: 24px 0;
}

.countdown-box img {
	position: absolute;
	left: 24px;
	top: -20px;
	padding: 3px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #eee;
}

.countdown-times {
	font-size: 32px;
	margin-top: 10px;
}

.countdown-times span {
	display: block;
}

.countdown .time-txt {
	padding-left: 28px;
}

.countdown .time-num {
	letter-spacing: -8px;
}

.countdown .time-txt font {
	display: inline-block;
	width: 28%;
}

.set-time {
	margin: 24px auto 0;
	line-height: 20px;
	position: relative;
	overflow: hidden;
}

.set-time span {
	text-align: center;
	margin: 0 35px;
	cursor: pointer;
}

.set-time::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 2px;
	height: 16px;
	background: #eee;
	z-index: 9;
}

.answer-state .answer-state-top {
	padding: 24px;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.16);
	position: relative;
}

.answer-state-top>img {
	padding: 3px;
	border: 1px solid #eee;
	border-radius: 50%;
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
}

.answer-state-top ul li {
	width: 50%;
	float: left;
	text-align: center;
}

.answer-state-top ul li span {
	margin: 0 5px;
}

.answer-state-btm {
	padding: 24px 22px;
	height: 335px;
	overflow-y: auto;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.16);
}


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.answer-state-btm::-webkit-scrollbar {
	width: 2px;
	height: 2px;
	background-color: #ffffff;
}

/*定义滚动条轨道 内阴影+圆角*/
.answer-state-btm::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	background-color: #ffffff;
}

/*定义滑块 内阴影+圆角*/
.answer-state-btm::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
	background-color: var(--main_color);
}

.answer-title {
	margin-bottom: 16px;
	display: flex;
	justify-content: space-between;
}

.answer-title span:nth-child(1) {
	font-size: 14px;
}

.item-state {
	margin-bottom: 15px;
}

.item-state:last-child {
	margin-bottom: 0;
}

.item-state ul li {
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	cursor: pointer;
}

.item-state ul li.cur {
	background: var(--hover_color);
}

.item-state ul li:hover {
	background: var(--hover_color);
}

.item-state ul li:nth-child(7n) {
	margin-right: 0;
}

/*答题状态修改样式 start*/
.answer-test-state ul li {
	width: 26px;
	height: 26px;
	line-height: 26px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 4px;
	text-align: center;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}

.answer-test-state ul li:nth-child(7n) {
	margin-right: 0;
}

.answer-test-state ul li:hover {
	background: var(--hover_color);
	cursor: pointer;
}

.answer-test-state ul li.cur {
	background: var(--hover_color);
}

/*答题状态修改样式 end*/

.doing-state {
	padding: 24px;
}

.doing-state ul li {
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.doing-state ul li span {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	margin-right: 5px;
}

.jiaojuan {
	height: 42px;
	line-height: 42px;
	text-align: center;
	border-radius: 0 0 8px 8px;
	cursor: pointer;
}

.answer-list-title {
	padding: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.answer-list-box {
	padding: 24px;
}

.answer-item-title {
	margin-bottom: 24px;
	display: none;
}

.answer-item-title span {
	font-weight: 400;
}

.exam-item {
	margin-bottom: 32px;
	color: rgba(0, 0, 0, 0.6);
}

.exam-item .ico-btn,
.exam-item .letter-sort,
.exam-item .exam-item-name {
	float: left;
}

.exam-item ul li {
	display: flex;
	align-items: center;
	margin-top: 16px;
	padding-left: 24px;

}

.exam-item ul li .ico-btn>i {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-right: 10px;
	box-sizing: border-box;
	border: 1px solid var(--color_grey);
}

.exam-item ul li .ico-btn>i.active {
	border: 5px solid var(--main_color);
}

.exam-item .letter-sort {
	margin: 0 8px 0 16px;
}

.exam-item .exam-item-title {
	display: flex;
	white-space: normal;
}

.item-title-word {
	color: rgba(0, 0, 0, 0.6);
	line-height: 24px;
}

.exam-item .exam-item-title .exam-item-word {
	font-weight: 400;
	line-height: 24px;
}

.multi-choise .exam-item ul li i {
	border-radius: 2px;
}

.item-title-word p {
	word-wrap: break-word;
	line-height: 24px;
	/* margin-bottom: 20px; */
}

.item-title-word p:last-child {
	margin-bottom: 0;
}



.fill-item-num {
	margin-right: 16px;
}

.cloze-choise .exam-item dl dd {
	/* float: left; */
	display: flex;
	align-items: center;
	margin-right: 32px;
}

.cloze-choise .exam-item dl dd .fill-ico {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-right: 10px;
	box-sizing: border-box;
	border: 1px solid var(--color_grey);
}

.cloze-choise .exam-item dl dd .fill-ico.active {
	border: 5px solid var(--main_color);
}

.reading-desc {
	margin-bottom: 32px;
	text-align: justify;
}
/*编辑器*/
.edit-cont {
	margin-top: 17px;
	padding-left: 24px;
}

.edui-container {
	z-index: 98 !important;
}


.reading-choise .answer-item {
	padding-left: 24px;
}

.reading-desc {
	display: flex;
}

/*人工评分*/
.manual-score {
	display: flex;
	align-items: center;
}

.save-score-btn {
	width: 60px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	margin: 0 16px;
}

.manual-score input {
	width: 80px;
	padding: 0 10px;
	height: 32px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 8px;

}


.manual-score input::-webkit-outer-spin-button,
.manual-score input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.manual-score input[type="number"] {
	-moz-appearance: textfield;
}


/* ==================================================
   答题结束
   ================================================== */
.zq_text {
	margin-top: 24px;
	/* width: 101px; */
	font-size: 18px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	/* color: #FF0000; */
	opacity: 1;
	letter-spacing: 2px;
}

.test-greens {
	color: #00D196 !important;
	font-family: Microsoft YaHei;
	font-weight: 400;
}

.jl {
	margin-top: 35px;
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	line-height: 0px;
	opacity: 1;

}

.answer-end-title {
	padding: 24px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.answer-end-title h3 {
	margin-bottom: 16px;
}

.end-title-btm {
	display: flex;
	justify-content: space-between;
}

.answer-end-list {
	padding: 50px 0;
	display: flex;
}

.give-paper {
	width: 500px;
	color: #00CF95;
	display: flex;
	align-items: center;
	/* justify-content: center; */
	flex-direction: column;
}

.give-paper i {
	font-size: 80px;
}

.answer-table-box {
	width: 574px;
}

.answer-end-table {
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.answer-end-table table thead {
	background: rgba(0, 0, 0, 0.04);
}

.answer-end-table table tr {
	height: 42px;
	line-height: 42px;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.answer-end-table table tbody tr {
	height: 51px;
	line-height: 51px;
}

.answer-end-table table tr:last-child {
	border-bottom: 0;
}

.answer-end-table table tr td:nth-child(2) span {
	margin: 0 5px;
}

.table-btm {
	margin-top: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.table-btm-right a {
	margin-left: 24px;
}


/* ==================================================
   试卷解析
   ================================================== */


/***试卷解析左侧正确率样式优化***/
.answer-right-num {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 24px 0;
	box-sizing: border-box;
}

.answer-right-num>img {
	padding: 2px;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 50%;
}

.answer-right-num>.icon-close {
	color: rgba(0, 0, 0, 0.1);
	font-size: 32px;
	margin: 0 30px;
}

.right-num-box ul li:last-child {
	margin-top: 4px;
	position: relative;
	left: -5px;
}

.right-num-text {
	font-size: 26px;
	color: #FF0000;
	letter-spacing: -6px;
}

/***合格***/
.reluct-status-success {
	color: #ff0000;
}

/***不合格***/
.reluct-status-fail {
	color: #A2A2A2;
}

/***满分***/
.reluct-status-all {
	color: #FFBC0E;
}

/***试卷解析左侧正确率样式优化 end***/

.solution {
	padding: 16px 24px;
	background: rgba(0, 0, 0, 0.04);
}

.solution dl {
	display: flex;
	margin-bottom: 16px;
}

.solution dl:last-child {
	margin-bottom: 0;
}

.solution dl dt {
	width: 74px;
}

.solution dl dd {
	width: 700px;
}

.exam-item .exam-item-title>i {
	margin-right: 8px;
	font-size: 14px;
}

.student-answer {
	margin-top: 16px;
	min-height: 123px;
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, 0.16);
}

.cloze-choise .exam-item ul li {
	display: inherit;
}

.cloze-choise .exam-item .solution dl dd {
	margin-right: 0;
}

.fill-item>i {
	margin-right: 8px;
}

.item-desc-word>p {
	margin-bottom: 20px;
}

.item-desc-word>p:last-child {
	margin-bottom: 0;
}
.item-desc-word img{
	width: 100%;
}

.done-state ul li {
	width: 33.33%;
}

/* ==================================================
   在线直播
   ================================================== */
.accordion ul li {
	padding-left: 21px;
	font-weight: 400;
	position: relative;
	margin-bottom: 16px;
}

.accordion ul li span {
	line-height: 30px;
}

.accordion ul li::before {
	position: absolute;
	content: '';
	width: 1px;
	height: 100%;
	background: rgba(0, 0, 0, 0.08);
	left: 2px;
	top: 18px;
}

.accordion ul li:hover {
	cursor: pointer;
}

.accordion ul li>.online_box {
	width: 100%;
	display: none;
}

.accordion ul li.cur>.online_box {
	display: block;
}

.accordion ul li .online-play-title {
	position: relative;
	display: flex;
	justify-content: space-between;
	/* margin-bottom: 8px; */
}

.online-play-title span:nth-child(2) {
	display: none;
}

.accordion ul li .online-play-title:hover {
	cursor: pointer;
	color: var(--main_color);
}

/* .accordion ul li::after {
	position: absolute;
	top: 11px;
	left: 0;
	content: '';
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	

} */

/* .accordion ul li.cur::after {
	background: var(--main_bg);
	border: 2px solid #dfc8c9;
	left: -2px;
} */

.accordion ul li>.dot {
	width: 5px;
	height: 5px;
	display: block;
	position: absolute;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 1;
	left: 0;
	top: 9px;
}

.accordion ul li.cur>.dot {
	width: 5px;
	height: 5px;
	display: block;
	position: absolute;
	border-radius: 50%;
	background-color: rgba(134, 48, 50, 1);
	z-index: 1;
	left: 0;
	top: 9px;
}

.accordion ul li.cur>.dot::after {
	width: 100%;
	height: 100%;
	content: "";
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	background-color: rgba(134, 48, 50, 1);
	animation: dot-play 4s linear infinite;
}

@keyframes dot-play {
	from {
		transform: scale(1);
		opacity: .6;
	}

	to {
		transform: scale(5);
		opacity: 0;
	}
}

.accordion ul li.cur>.dot::before {
	width: 100%;
	height: 100%;
	content: "";
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: rgba(134, 48, 50, 1);
	animation: dot-play 4s linear infinite;
	animation-delay: 2s;
}

@keyframes dot-play {
	from {
		transform: scale(1);
		opacity: .4;
	}

	to {
		transform: scale(5);
		opacity: 0;
	}
}

.accordion ul li.cur::before {
	top: 20px;
}

.accordion ul li.cur span:nth-child(1) {
	font-weight: bold;
	color: var(--main_bg);
}

.accordion ul li.cur span:nth-child(2) {
	display: block;
}



.course-video-box.online-video-box .course-video {
	height: 448px;
}

.course-video-box.online-video-box .course-video-side {
	height: 400px;
	overflow-y: auto;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.course-video-box ::-webkit-scrollbar {
	width: 2px;
	height: 2px;
	background-color: #ffffff;
}

/*定义滚动条轨道 内阴影+圆角*/
.course-video-box ::-webkit-scrollbar-track {
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	background-color: #ffffff;
}

/*定义滑块 内阴影+圆角*/
.course-video-box ::-webkit-scrollbar-thumb {
	border-radius: 6px;
	box-shadow: inset 0 0 1px rgba(0, 0, 0, .06);
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .06);
	background-color: var(--main_color);
}

.live-notice-banner {
	margin-top: 48px;
}

.live-notice-banner ul {
	margin-right: -24px;
}

.live-notice-banner ul li {
	width: 376px;
	margin-right: 24px;
}

.live-notice-banner ul li:last-child {
	margin-right: 0;
}

.live-cont {
	width: 376px;
	height: 198px;
	position: relative;
	background: #f5f5f5;
	border-radius: 16px;
}

.live-notice-banner ul li .live-cont>img {
	position: absolute;
	bottom: 0;
	left: 24px;
	/* width: 128px;
    height:257px; */
	max-width: 128px;
}

.live-cont-word {
	width: 176px;
	padding: 24px;
}

.live-cont-word h3 {
	font-size: 14px;
	margin: 0 auto 16px;
}

.yuyue-num {
	text-align: right;
	margin-bottom: 8px;
}

.yuyue-btn {
	width: 105px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	border: 1px solid var(--main_bg);
	color: var(--main_bg);
	border-radius: 16px;
	margin: 32px auto 0;
	font-size: 14px;
	box-sizing: border-box;
}

.yuyue-btn.active {
	background: rgba(0, 0, 0, 0.08);
	color: rgba(0, 0, 0, 0.3);
	border: 0;
}

.hot-word-bottom {
	width: 100%;
	/* height: 30px; */
	background: #ffaa7f;
}

.hot-word-bottom .tit {
	margin: 0 55px 25px 16px;
	float: left;
}


.hot-recommend {
	padding-bottom: 40px;
}

.hot-recommend ul {
	margin-right: -24px;
}

.hot-recommend ul li {
	width: 276px;
	height: 176px;
	box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
	opacity: 1;
	background: #FFFFFF;
	margin: 0 24px 24px 0;
	border-radius: 8px;
	position: relative;
}


.zb_moer_btn {
	width: 1176px;
	height: 42px;
	background: rgba(0, 0, 0, 0.04);
	margin: 20px auto;
	opacity: 1;
	border-radius: 8px;
	text-align: center;
	line-height: 42px;
}

.zb_moer_btn:hover {
	cursor: pointer;
	color: var(--main_color);
}

.name_box {
	/* width: 80px; */
	height: 19px;
	/* background: #0077AA; */
	float: right;
	display: flex;
	align-items: center;
}

.name_box .icon_box {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: RGBA(0, 207, 149, 1);
	display: flex;
	justify-content: center;
	align-items: center;
}

.name_box .name {
	float: right;
	margin-left: 7px;
	margin-right: 16px;
}


.icon_box .icon-star {
	color: #FFFFFF;
}

.zb_img {
	position: absolute;
	right: 0;
	top: 0;
}

.hot-recommend ul li a {
	font-size: 14px;
}

.hot-recommend ul li h3 {
	font-size: 14px;
	margin: 16px 0;
	color: rgba(0, 0, 0, 0.8);
	height: 45px;
}

.hot-recommend ul li .hot-pic {
	height: 164px;
	overflow: hidden;
	border-radius: 16px;
}

.hot-recommend ul li .hot-pic img {
	transform: scale(1);
	transition: linear .3s;
}

.hot-recommend ul li:hover img {
	transform: scale(1.05);
	transition: linear .3s;
}

/*无数据展示*/

.course-video .nothing {
	position: relative;
}

.nothing-word {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}

.live-notice-banner .nothing,
.hot-recommend .nothing {
	padding: 40px 0;
}