@import "reset";
@import "footer";
body,a { font-family: "微软雅黑"; }
/* 最外面的包含层*/
.wrapper {
	margin: 0 auto;
	min-width: 1206px;
	width: 100%;
	position: relative;
	//margin: 0 auto;
} 
//顶部提示条
.top-notice {	
	height: 36px;
	padding: 0 13%;
	font-size: 12px;
	background: #f3f3f3;
	//display: none;
}
.top-notice p {
    display: inline-block;
	line-height: 36px; 
}
.watch-now {
	color: #4fb173;
}
.watch-now:after {
	content: ">";
}
.no-notice {
	float: right;
	cursor: pointer;
	padding-left: 11px;
	line-height: 36px;
	a {
		display: inline-block;
		padding-right: 6px;
		width: 12px;
		height: 12px;
		background: url("../../images/icons.png")  0 2px no-repeat;
	}	
}
//主要内容
.container {
	position: absolut;
	top: 36px;
}

//header部分
header {
	padding: 0 13%;
	height: 90px;
	line-height: 90px;
	span {
		font-size: 12px;
		padding-left: 12px;
	}
}
.logo {
	display: inline-block;
	font-family: "Gill Sans MT";
	font-size: 28px;
	font-weight: bold;
	color: #39a030;
	width: 72px;
	background: url("../../images/icons.png") 70px -2px no-repeat;
}
.title {
	display: inline-block;
	font-size: 22px;
	padding-right: 32px;
}
.add-attention {
	padding: 2px 10px 2px 22px;
	color: #fff;
	font-size: 12px;
	background: url("../../images/icons.png") 0 -98px no-repeat;
}
.nav {
	float: right;
}
.nav li {
	float: left;
	padding-right: 54px;	
	a {
		color: #666; 
	}
}
.nav a:hover {
	color: #21a557;
}

//顶部图片轮播部分
.top-banner {
	position: relative;
	z-index: 0;
	float: left;
	height: 375px;
	overflow: hidden;
	img {
		max-width: 100%; 
	}	
}
.top-banner li {
	display: none;
	float: left;
}
.dot { 
	position: absolute;
	top: 442px;
	left: 48%;
}
.dot li { 
	float: left;
	margin-left: 12px;
	width: 14px;
	height: 14px;	
	cursor: pointer;
}
.r { background: url("../../images/icons.png") 0 -232px no-repeat; }
.current {
	 background: url("../../images/icons.png") 0 -195px no-repeat;
}
//课程详情部分
.course-list {
	padding: 50px 13%;
	position: absolute;
	top: 516px;
	z-index: 0;
}
.course-list li {
	float: left;
	padding: 0 24px 0 96px;
	background: url("../../images/icons.png") -418px -414px no-repeat;
	h4 { 
		font-size: 22px;
		font-weight: normal;
		}
	p {
		width: 220px;		
		padding: 22px 0 36px 0;
		font-size: 14px;
		color: #989898;
	}
	a {
		color: #80bc7c;
	}
}
.course-list a:after {
	content: ">";
}
#no-padding { padding-right: 0; }


//图片轮播部分
.center-banner {
	max-width: 100%;
	height: 250px;
	position: absolute;
	top: 800px;
	margin-right: 0;
	background: #f8f8f8;
	overflow: hidden;
}
.center-banner li {	
	padding-top: 2px;
	padding-right: 5px;
	float: left;
	img {
			height: 180px;
			width: 264px;
	}
}
//课程content部分
.content {
	width: 100%;
	background: #f8f8f8;
	position: absolute;
	top: 1050px;
	height: 1700px;
}
//下面tab选项卡
.main-courses {	
	position: absolute;
	left: 5%;
	width: 84%;	
}
.tab-change li {
	float: left;
	width: 20%;
	line-height: 50px;
	text-align: center;
	box-shadow: 1px 1px 2px #ecebeb;
}
.resource {
	background: #fff;
	color: #666;
}
.active {
	background: #39a030;
	color: #fff;
}
.tab-change li:hover {
	background: #39a030;
	color: #fff;	
}

//课程详细部分(尝试使用juicer.js 模板引擎)

.design-courses {
	width: 984px;
    height: 1250px;
	padding-top: 78px;
	li {
		float: left;
		margin-right: 24px;
		margin-top: 20px;
		width: 222px;
		height: 230px;
		font-size: 12px;
		background: #fff;
	}
	img {
		padding-top: 1px; 
		width: 222px;
		height: 126px;
	}
	h5 {	
		font-weight: normal;	
		color: #a1a1a1;
		padding-top: 8px;
		padding-right: 6px;
		padding-left: 6px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	span {
		display: block;	
		padding-right: 6px;	
	}
}
.design-members {
		margin-top: 8px;
		margin-left: 6px;
		padding-right: 6px;
		//padding: 1px 2px 1px 20px;
		text-indent: 14px;
		width: 30px;
		height: 16px;
		border: 1px solid #ddd;
		border-radius: 2px;
		background: url("../../images/icons.png") 0 -350px no-repeat; 
}
.category {
	padding-top: 8px;
	padding-left: 6px;
	color: #ddd;
}
.price {
	padding-top: 8px;
	padding-left: 6px;
	color: #ff582a;
}
.vertify {
	position: absolute;
    height: 1348px;
    overflow: hidden;
}
.p-detail {
	float: left;
}
//实现页面切换
.page-change {
	position: absolute;
    top: 1428px;
    z-index: 2;
    left: 636px;
	span {
		display: inline-block;
		width: 30px;
		height: 22px;
		color: #fff;
		background: #9dd8b1;
		text-align: center;

	}
	a {
		color: #fff;
		font-size: 16px;
	}
	ul {
		display: inline-block;
		color: #666;
		font-size: 14px;
		padding: 0 10px;
	}
	li {
		float: left;
		width: 21px;
		height: 21px;
		line-height: 21px;
		text-align: center;
		margin-right: 8px;
		cursor: pointer;
	}
}
.page-change li:hover {
	background: #9dd8b1;
	color: #fff;
}
.current1 {
	color:  #9dd8b1;
}
//机构介绍部分
.the-latest {
	position: absolute;
	right: 5%;
	width: 226px;
	border: 1px solid #ecebeb;
	background: #fff;
	h4 {
		padding-left: 18px;
		height: 56px;
		line-height: 56px;
		border-bottom: 1px solid #ddd;
		font-weight: normal;
		font-size: 16px;
	}
	div {
		font-size: 14px;
		color: #666;
	}
}
.l-padding { padding: 22px;}
.video-play {
	width: 180px;
	height: 110px;
	padding-top: 6px;
}

//课程刷新部分
.hot-c {
	position: relative;
	height: 720px;
	overflow: hidden;
}
.hot-courses {	
	position: absolute;
    width: 226px;
    cursor: pointer;
}
.ten-detail {
	padding-bottom: 22px;
	top: 266px;
	li {
		padding-top: 22px;
		padding-left: 22px;
		height: 50px;
		width: 182px;
	}
	img { 
		width: 50px;
		height: 50px;
		float: left;
		margin-right: 12px;
	}
	h5 { 
		font-weight: normal;
		font-size: 14px;
		color: #666;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	span {
		width: 100px;
		height: 14px;
		font-size: 10px;
		color: #999;
		padding-left: 14px;
		background: url("../../images/icons.png") 0 -350px no-repeat;
	}
}
//底部样式
footer {
	position: absolute;
	bottom: 0;
	height: 264px;
	width: 100%;
	background: #2c3339;
	dl {
		padding-left: 120px; 
		float: left;
		color: #a2a4a5;
		dt {
			font-size: 12px;
		}
		dd {
			padding-top: 15px;
			font-size: 14px;
		}
	}
}
.copyright {
	padding-top: 94px;
	padding-left: 256px;
	width:  396px;
	height: 86px;
	a {
		width: 236px;
		height: 20px;
		background: url() 0 0 no-repeat;
	}
}

.mask{
	margin:0;
	padding:0;
	border:none;
	width:100%;
	height:100%;
	background:#333;
	opacity:0.8;
	filter:alpha(opacity=60);
	z-index:9999;
	position:fixed;
	top:0;
	left:0;
	display:none;
}
#LoginBox { 
	position:absolute;
	left:460px;
	top:150px;
	background:white;
	width:426px;
	height:300px;
	z-index:10000;
	display:none;
}
.row1 {
	padding: 10px 40px; 
	line-height:50px;
	height:50px;
	font-weight:bold;
	color:#666;
	font-size:18px;
}
.row {
	height:77px;
	line-height:77px;
	padding:0px 40px;
	font-size: x-large;
}
.close_btn {
	font-size:20px;
	color:#fff;
	text-decoration:none;
	float:right;
	padding-right:4px;
}
.inputBox {
	border:1px solid #c3c3c3;
	padding:1px 3px 6px 8px;
	background: #fafafa;
	margin-left:10px;
}
#txtName {
	height:27px;
	width:290px;
	border:none;
	background: #fafafa;
}
#txtPwd {
	height:27px;
	width:290px;
	border:none;
	background: #fafafa;
}
#loginbtn {
	color:#fff;
	background:#24ac46;
	text-decoration:none;
	padding:4px 126px;
	margin-left:8px;
	opacity:0.8;
	filter:alpha(opacity=80);
}
.warning{ 
	float:right;
	color:Red;
	text-decoration:none;
	font-size:20px;
	font-weight:bold;
	margin-right:20px;
	display:none;
}

//视频播放弹窗
#big-video {
	position: absolute;	
	left:192px;
	top:874px;
	background:white;
	width:950px;
	height:676px;
	z-index:10000;
	display:none;
	a {
		display: block;
		float: right;
		font-size: 20px;
		padding-right: 12px;

	}
	h4 {
		float: left;
		padding-top: 36px;
		padding-left: 30px;  
		color: #666;
	}
	video {
		height: 570px;
		width: 890px;
		padding-top: 20px;
		padding-left: 30px;
	}
}
