body, p, h1, h2, h3, h4, h5, h6, dl, dd { 
	margin:0;
	padding: 0;
	font-family: 'Microsoft YaHei';
}
a { 
	text-decoration: none;
}
ol, ul { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
}
img {
 	border: none;
}   
input {
	outline: none;
}


body,html {
	width: 1616px;
	margin: auto;
}

#login{
	display: none;
}
#login .float {
	position: absolute;
	position: fixed;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.4;
	filter:alpha(opacity=40);
	z-index: 1;
}
#login > form {
	position: absolute;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -144px -193px;
	border: 1px solid #ccc;
	width: 384px;
	height: 287px;
	z-index: 2;
	background: #fff;
}
#login > form > h3 {
	width: 300px;
	height: 21px;
	line-height: 21px;
	font-size: 18px;
	color:  #444;
	margin-top: 7px;
	margin-left: 39px;
	margin-bottom: 3px;
}
#login > form > span {
	display: inline-block;
	width: 22px;
	height: 22px;
	cursor: pointer;
	margin-left: 362px;
	background: url(../images/x.png) no-repeat 0 -158px; 

}

#login .int input {
	width: 284px;
	height: 46px;
	border: 1px solid #dfdfdf;
	margin-top: 15px;
	margin-left: 40px;
	padding-left: 11px;
}
#login .sub {
	width: 294px;
	height: 46px;
	color: #fff;
	border: none;
	background:  #1ba53c;
	margin-left: 40px;
	margin-top: 29px;
	cursor: pointer;
}

#alert-video {
	display: none;
}
#alert-video .float {
	position: absolute;
	position: fixed;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.4;
	filter:alpha(opacity=40);
	z-index: 1;
}
#alert-video .video-content {
	position: absolute;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -338px -475px;
	width: 950px;
	height: 676px;
	background: #fff;
	z-index: 2;
}
#alert-video .video-content > span {
	display: inline-block;
	width: 22px;
	height: 22px;
	cursor: pointer;
	margin-left: 923px;
	margin-top: 6px;
	background: url(../images/x.png) no-repeat 0 -158px; 

}
#alert-video .video-content > h3 {
	line-height: 21px;
	font-size: 18px;
	color:  #444;
	margin-left: 30px;
}
#alert-video .video-content > video {
	width: 889px;
	height: 567px;
/*	margin-top: 21px;*/
	margin-left: 31px;
}

#notice {
	background: #f3f3f3;
	position: relative;
}
.notice-content {
	width: 1205px;
	margin: auto;
	height: 36px;
	background: #f3f3f3;
}

.notice-left {
	display: inline-block;
	font-size: 12px;
	font-family: 'Microsoft YaHei';
	color: #333333;
	line-height:14px;
	margin-top: 11px;
}
.notice-right {
	display:inline-block;
	position: absolute;
	right: 205px;
	font-size: 12px;
	font-family: 'Microsoft YaHei';
	color: #333333;
	line-height:14px;
	margin-top: 11px;
	padding-right: 2px;
	padding-left: 16px;
	cursor: pointer;
	background: url(../images/x.png) no-repeat 1px 0;
}

.notice-content >a {
	color: #21a557;
}


#top {
	width: 1205px;
	margin: auto;
	height: 88px;
	position: relative;
/*	background: #fff;*/
}


.top-left > ul>li {
	display:inline-block;
	float: left;
	padding-top: 25px;
}

.top-left > ul>li a {
		display: inline-block;
		font-size: 28px;
		font-weight: bold;
		font-family: 'Gill Sans MT';
		color: #39a030;
		line-height: 26px;
		width:60px;
		margin-left: 1px;
		padding-right: 10px;

	}
.top-left > ul>li h2 {
		display: inline-block;
		font-size: 22px;
		font-family: 'HiraginoSansGB W3';
		font-weight: 22px;
		color:#333;
		line-height: 26px;
		padding-left: 12px;

	}

.top-left > ul>li input {
		margin-left: 30px;
		margin-top: 2px;
		width: 54px;
		height: 21px;
		font-size:12px;
		font-family:'宋体';
		color: #fff;
		background: url(../images/attention.png) no-repeat;
		background-color: #21a557;
		border:none;
		outline: none;
		border-radius: 1px;
		cursor: pointer;
	}

.fans {
		padding-left: 14px;
		margin-top: 9px;
		font-size: 12px;
		font-family: '宋体';
		color: #666;
	}

.bar {
	font-size: 22px;
	font-weight: bold;
	font-family: 'Gill Sans MT';
	color: #39a030;
	margin-top: -2px;
}
.top-right {
	width:454px;
	position: absolute;
	top: 35px;
	right: 0;
}

.top-right > ul>li {
	float: left;
	font-size: 16px;
/*	font-family: 'HiraginoSansGB W3';*/
	color: #666;
	text-align: right;
}
.top-right > ul>li a {
	color: #666;
}
.top-right > ul>li a:hover{
	color: #39a030;
}

.top-right-1 {
	margin-left: 22px;
}
.top-right-2 {
	margin-left: 54px;
}
.top-right-3 {
	margin-left: 56px;
}
.top-right-4 {
	width: 19px;
	height: 19px;
	margin-left: 30px;
	margin-right: 14px;
	background: url(../images/research.png) no-repeat;
}

#banner{
	position: relative;
}
#banner .pic{
	width: 1616px;
	height: 460px;
	overflow: hidden;
}
#banner .pic li{
	float: left;
}
#banner .pic img {
	width: 1616px;
	height: 460px;
}

#banner .dot {
	width: 70px;
	height: 10px;
	position: absolute;
	top: 430px;
	left: 50%;
	z-index: 1;
}
#banner .dot li {
	float: left;
	width: 10px;
	height: 10px;
	margin-right: 11px;
	background: #fff;
	border-radius: 50%;
	cursor: pointer; 
}
#banner .dot .active{
	background: #000;
}

#lesson {
	width: 1205px;
	height: 295px;
	margin: auto;
	position: relative;
}

#lesson div {
	height: 180px;
	float: left;
	margin-top: 59px;
}
#lesson div > h2 {
	font-size: 22px;
	color: #333;
}
#lesson div > p {
	margin-top: 13px;
	line-height: 24px;
	font-size: 14px;
	color: #666666;
	line-height: 
}
#lesson div > a{
	display: inline-block;
	position: absolute;
	bottom: 59px;
	font-size: 14px;
	color: #39a030;
}
#lesson div > a:hover {
	text-decoration: underline;
}
.public {
	width: 280px;
	padding-left: 104px;
	background: url(../images/lesson.png) no-repeat 8px 9px ;
}
.cloud {
	width: 249px;
	padding-left: 138px;
	background: url(../images/lesson.png) no-repeat 40px -171px ;
}
.mooc {
	width: 255px;
	margin-left: 46px;
	padding-left: 133px;
	background: url(../images/lesson.png) no-repeat 19px -351px ;
}

#picture {
	width: 100%;
	height: 222px;
	background: #f8f8f8;
}
#picture li {
	float: left;
	margin-top: 2px;
	padding-right: 4px;
}
#picture .clear {
	padding-right: 0;
}


#section {
	width: 1616px;
	height: 1551px;
	background-color: #f8f8f8;
}
#tab {
	width: 1205px;
	margin: auto;
	position:relative;
	top: 81px;
}
#tab .tab-title {
	width: 400px;
	height: 52px;
	border: 1px solid #d4d3d3;
}
#tab .tab-title input {
	width: 200px;
	height: 52px;
	margin-top: -2px;
	font-size: 20px;
	color: #666;
	line-height: 50px;
	border: none;
	outline: none;
	cursor: pointer;
	background: #fff;
}
#tab .tab-title  .tab-active {
	color: #fff;
	background: #39a030;
}
#tab ul {
	float: left;
	margin-right: 18px;
	margin-bottom: 18px;
	width: 225px;
	height: 228px;
	border: 1px solid #f1f1f1;
	background: #fff;
}
#tab .design {
	display: block;
}

.lesson-1,
.lesson-2,
.lesson-3,
.lesson-4 {
	margin-top: 27px;
}
#tab .design .lesson-photo {
	width: 223px;
	height: 124px;
	margin: 1px;
	background:#cfcfcf;
}
#tab .design .lesson-name {
	font-size: 12px;
	color: #333;
	line-height: 14px;
	margin-top: 9px;
	margin-left: 5px;
}
#tab .design .categoryName {
	font-size: 12px;
	color: #999;
	line-height: 14px;
	margin-top: 8px;
	margin-left: 5px;
} 
#tab .design .learner {
	width: 22px;
	height: 16px;
	border: 1px solid #f1f1f1;
	border-radius: 1px;
	line-height: 16px;
	font-size: 8px;
	color: #999;
	margin-top: 8px;
	margin-left: 5px;
	padding-left: 18px;
	background: url(../images/x.png) no-repeat 0 -14px;
}
#tab .design .lesson-price {
	font-size: 12px;
	color: #ff3f00;
	line-height: 14px;
	margin-top: 10px;
	margin-left: 6px;
}
#tab .code {
	display: none;
}
.lesson-1,
.lesson-2,
.lesson-3,
.lesson-4 {
	margin-top: 27px;
}
#tab .code .lesson-photo {
	width: 223px;
	height: 124px;
	margin: 1px;
	background:#cfcfcf;
}
#tab .code .lesson-name {
	font-size: 12px;
	color: #333;
	line-height: 14px;
	margin-top: 9px;
	margin-left: 5px;
}
#tab .code .categoryName {
	font-size: 12px;
	color: #999;
	line-height: 14px;
	margin-top: 8px;
	margin-left: 5px;
} 
#tab .code .learner {
	width: 22px;
	height: 16px;
	border: 1px solid #f1f1f1;
	border-radius: 1px;
	line-height: 16px;
	font-size: 8px;
	color: #999;
	margin-top: 8px;
	margin-left: 5px;
	padding-left: 18px;
	background: url(../images/x.png) no-repeat 0 -14px;
}
#tab .code .lesson-price {
	font-size: 12px;
	color: #ff3f00;
	line-height: 14px;
	margin-top: 10px;
	margin-left: 6px;
}

#page {
	position:absolute;
	top: 2523px;
	left: 863px;
	width: 302px
	height: 20px;
}
#page ul> li {
	float: left;
}
#page li > a {
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 20px; 
	font-size: 14px;
	color: #666;
	text-align: center;
	margin-right: 8px;
}
#page li > a:hover {
	color: #fff;
	background-color: #9dd8b1;
}
#page .page-active {
	color:  #9dd8b1; 
}
#page .page-left {
	width:30px;
	height: 20px;
	margin-right: 12px;
	background: url(../images/x.png) no-repeat 11px -115px;
	background-color: #9dd8b1;  
}
#page .page-left > a:hover {
	background-color: none;
}
#page .page-right {
	width:30px;
	height: 20px;
	margin-left: 4px;
	background: url(../images/x.png) no-repeat 13px -136px;
	background-color: #9dd8b1;  
}
#page .page-right > a:hover {
	background-color: none;
}

#introduce {
	position: relative;
	top:31px;
	left: 1186px;
	width: 223px;
	height: 228px;
	border: 1px solid #f1f1f1;
	background-color: #fff;
}
#introduce  h2 {
	position: absolute;
	width: 203px;
	height: 37px;
	font-size: 16px;
	color: #333;
	line-height: 18px;
	padding-top: 18px;
	padding-left: 20px;
	border-bottom:  1px solid #f1f1f1;
}
#introduce p{
	position: absolute;
	font-size: 14px;
	color: #666;
	line-height: 16px;
	padding-top: 58px;
	padding-left: 2px;
	margin: 18px 0 7px 20px;
}
#introduce .video {
	position: absolute;
	top: 99px;
	left: 22px;
	width: 180px;
	height: 110px;
/*	background: url(../images/x.png) no-repeat 67px -30px;
	z-index: 999;*/
}

#ranking {
	position: relative;
	top: 40px;
	left: 1186px;
	width: 223px;
	height: 778px;
	border: 1px solid #f1f1f1;
	background-color: #fff;
}
#ranking h2 {
	position: absolute;
	width: 203px;
	height: 37px;
	font-size: 16px;
	color: #333;
	line-height: 18px;
	padding-top: 18px;
	padding-left: 20px;
	border-bottom:  1px solid #f1f1f1;
}
#ranking ul{
	position: relative;
	top: 57px;
	left: 20px;
	width: 203px;
	height: 50px;
	margin: 20px 0;
}
#ranking .ranking-photo {
	width: 50px;
	height: 50px;
	background-color: #cfcfcf;
}
#ranking .ranking-name {
	position: absolute;
	top: 0;
	left: 62px;
	width: 126px;
	height: 16px;
	font-size: 14px;
	color: #333;
	line-height: 16px;
}
#ranking .ranking-per {
	position: absolute;
	top: 12px;
	left: 50px;
	width: 40px;
	height: 10px;
	font-size: 8px;
	color: #999;
	line-height: 10px;
	margin-top: 11px;
	margin-left: 13px;
	padding-left: 13px;
	background: url(../images/x.png) no-repeat -3px -17px;
}


#footer {
	position: relative;
	width: 1616px;
	height: 262px;
	background-color: #2c3339;
}
#footer .footer-left {
	position: absolute;
	top:95px;
	left: 256px;
	width: 394px;
	height: 92px;
}
.footer-logo li {
	display:inline-block;
	padding-top: 25px;
	margin-bottom: 9px;
}

.footer-logo li > a {
	display: inline-block;
	font-size: 28px;
	font-weight: bold;
	font-family: 'Gill Sans MT';
	color: #39a030;
	line-height: 26px;
	width:60px;
	margin-left: 1px;
	padding-right: 10px;

	}
.footer-logo li > h2 {
	position: absolute;
	top: 25px;
	display: inline-block;
	font-size: 22px;
	font-family: 'HiraginoSansGB W3';
	font-weight: 22px;
	color: #39a030;
	line-height: 26px;
	padding-left: 12px;
}
.footer-logo .bar {
	position: absolute;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Gill Sans MT';
	color: #39a030;
}
#footer .footer-left .footer-device {
	width: 394px;
	height: 40px;
	font-size: 12.5px;
	line-height: 14px;
	color: #fff;
}
#footer .footer-left .footer-device ul {
/*	position: absolute;
	top: 10px;
	left: 30px;*/
}
#footer .footer-left .footer-device li {
	margin-top: 10px;
}

.footer-message {
	position: relative;
	top: 81px;
	left: 799px;
	width: 600px;
	height: 136px;
}
.footer-message  ul {
	width: 135px;
	height: 110px;
	float: left;
}

.footer-message ul > h4 {
	font-size: 12.5px;
	font-weight: normal;
	color: #fff;
}
.footer-message ul > li {
	line-height: 18px;
	margin-top: 13px;
}
.footer-message ul > li a {
	font-size: 14px;
	color: #fff;
}
.footer-message ul > li a:hover {
	text-decoration: underline;	
}

.footer-message .our {
	margin-left: 74px;
}
.footer-message .our span > a {
	display: inline-block;
	width: 30px;
	height: 16px;
	background: url(../images/weboc.png) no-repeat 7px;
}