.page-course{
	background:#000;
	background-repeat: no-repeat;
	width:100vw;
	min-height: 100vh;
	display:flex;
	flex-direction: column;
	padding-bottom:50px;
	.section0{
		display: flex;
		
		margin-left: 10px;
		margin-right: 10px;
		.image{
			width:100%;
			height:340px;
			overflow: hidden;
			border-radius: 7px;
			.img{
				width:100%;
				height:100%;
			}
		}
	}
	
	.section1{
		margin-left:10px;
		margin-right: 10px;
		display: flex;
		flex-direction:column;
		margin-top:10px;
		height:60px;
		.title{
			height:30px;
			width:100%;
			display: flex;
			flex-direction:row;
			color:#FFF;
			
			.text{
				width:50%; 
				.name{
					color:$teacher_main_color;
					font-size:14px;
					font-weight: bold;
					height:30px;
					line-height: 30px;
				}
				.tags{
					display:flex;
					flex-direction: row;
					.tag{
						border:1px solid $teacher_main_color;
						color:$teacher_main_color;
						font-size:12px;
						border-radius: 5px;
						padding:2px 5px;
						margin-right:10px;
					}
				}
			}
			.sign{
				color:#FFF;
				width:50%;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				>view{
					 .img{
						 margin-right: 10px;
						 .icon{
							 width:14px;
							 height:14px;
						 }
					 }
				}
			}
		}
	}

	
	.section2{
		margin-top:10px;
	}
	.section3{
		margin-top:10px;
	}
	
	.section4{
		margin-top:10px; 
	}
	
	.section5{
		margin-top:10px;
		.cate{
			display:flex;
			flex-direction: row;
			margin-left: 10px;
			border-radius: 5px;
			margin-right: 10px;
			height:30px;
			background:#1a1a1a;
			.name{
				width:33%;
				height:100%;
				color:#FFF; 
				display:flex;
				justify-content: center;
				align-items: center;
				font-size:12px;
			}
		}
		.intro{
			background:#1a1a1a;
			border-radius: 10px;
			margin-top:10px;
			margin-left:10px;
			margin-right: 10px;
			.title{
				height:30px;
				line-height: 30px;
				border-bottom: 1px solid #333;
				margin:10px;
				color:$teacher-main-color;
				font-size:14px;
				font-weight: bold;
			}
			.text{
				font-size:12px;
				color:#CCC;
				padding:10px;
			}
		}
	}
	
	.footer{
		position: fixed;
		bottom:0px;
		left:0px;
		width:100%;
		height:50px;
		background:#FFF;
		display:flex;
		flex-direction: row;
		border-top:1px solid #000;
		.left{
			width:50%;
			height:100%;
			.price{
				display:flex;
				flex-direction: row;
				width:100%;
				height:100%;
				justify-content: flex-start;
				align-items: center;
				padding-left:20px;
				color:#eb5c20;
				.sign{
					margin-top:5px;
					font-size:12px;
				}
				.text{
					font-size:24px;
				}
			}
		}
		.right{
			width:50%;
			display:flex;
			flex-direction: row;
			height:100%;
			justify-content: flex-start;
			align-items: center;
			.share{
				display:flex;
				width:50%;
				background:#000;
				color:#FFF;
				height:100%;
				justify-content: center;
				align-items: center;
				font-size:12px;
			}
			.yy{
				background:#eb5c20;
				height:100%;
				width:50%;
				justify-content: center;
				align-items: center;
				font-size:12px;
				display:flex;
				color:#FFF;
			}
		}
	}
	
	.yy-form{
		width:100%;
		background:#FFF;
		padding:10px;
		background:#000;
		height:500px;
		.yy-title{
			width:100%;
			height:30px;
			line-height:30px;
			.txt{
				font-size:12px;
				color:#FFF;
				margin-left:15px;
			}
		}
		.yy-list{
			height:95%; 
			overflow: hidden;
			overflow-y: auto;
		}
	}
}