.lessonHeader {
	height: 400px;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.lessonHeader>.mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(37, 49, 57, .9)
}

.lessonHeader>.content {
	position: relative;
	z-index: 2;
	height: 100%;
	color: #fff;
}

.lessonHeader>.content>.title {
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 60px;
	line-height: 100px;
}

.lessonHeader>.content>.description {
	width: 100%;
	text-align: center;
	text-align: left;
}

.lessonHeader>.content>.description>p {

	color: #eee;
	font-size: 16px;
	line-height: 2.5em;
}

.description {
	font-size: 16px;
	line-height: 2.5em;
}

.description>p:first-child::before {
	font-family: 'icon';
	content: "\e63d";
	margin-right: 10px;
	font-size: 30px;
	color: #999;
}

.description>p:last-child::after {
	font-family: 'icon';
	content: "\e63d";
	transform: rotate(180deg);
	display: inline-block;
	margin-left: 10px;
	font-size: 30px;
	color: #999;
	position: relative;
	top: 6px;
}

.prodItem {
	width: 100% !important;
	margin-bottom: 30px;
}

.card-img-top {
	width: 100%;
	height: 10vw;
	object-fit: cover;
}

.prodItem:hover a {
	background: var(--primary) !important;
	color: #fff !important;
	border-color: var(--primary) !important;
}

.prodItem:hover h5 {
	color: var(--primary) !important;
}

.card-text {
	min-height: 70px;
}

.diyContent {
	line-height: 2.5em;
	font-size: 15px;
}

.diyContent h2 {
	padding-top: 80px !important;
	font-size: 36px;
	color: #444;
}

.diyContent h4 {
	padding-top: 30px;
}

.diyContent img {
	width: 100%;
}

.pic2 {
	width: 100%;
	height: 660px;
	object-fit: cover;
}

.pic3 {
	width: 100%;
	height: 160px;
	object-fit: cover;
}
.customLogo{
	width: 100%;
	height: 120px;
	padding: 20px 40px;
	box-sizing: border-box;
}
.customLogo>img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}