//This is sass file
@charset "UTF-8";
@import "../css/reset.css";
@import "mixin";
$commentWidth:1206px;
.header-tips{
    height: 36px;
    background-color: #f3f3f3;
    @include minWidth(100%,$commentWidth);
    font-size: 12px;
    transition: margin-top 0.3s;
	overflow:hidden;
	.header-tips-content{
    position: relative;
    width: $commentWidth;
    height: 36px;
    margin: 0 auto;  
    .text{
    display: inline;
    line-height: 36px;
    font-family: '黑体';
}
	.more{
    color: #21a557;
}
	.tips{
	position: absolute;
    top: 0;
    right: 0;
    line-height: 36px;
    padding-left: 15px;
    background: url(../../../images/close-ico.jpg) no-repeat 0 center;
    cursor: pointer;

	}

}
}

.header-top{
	width:$commentWidth;
	height:88px;
	margin:0 auto;
	margin-bottom: 30px;
	&:after{
	@include clearFloat;
	}
}
.header-top-left{
	float: left;
	margin:26px 0 0 0;

}
.logo{
	display:inline-block;
	margin-right: 34px;
}
.logo-letter{
	font-size:28px;
	font-weight:bold;
	color:#39a030;
}
.line{
	margin:0 14px;
	font-size:22px;
	color:#39a030;	
}
.logo-name{
	font-size:22px;
	color:#333;
}
.login{
	display:inline-block;
	margin:30px 0 0 0;
	.follow{
	float: left;
	margin-right: 14px;
	width:54px;
	height:20px;
	background:#21a557;
    font: 400 12px SimSun;
    line-height: 20px;
    color: #fff;
    text-align: center;
    @include border-radius(2px);
    .sym{
	margin-right:4px;
}
}

	.followed{
	float: left;
    width: 106px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #f8f8f8;
    font-family: SimSun;
    overflow: hidden;
    @include border-radius(2px);
  
    margin:0 10px;
    .sym{
    	margin-right: 4px;
    }
    .txt{

	font-size: 12px;
}
	.sep{
	color: #ccc;
    font-size: 10px;
}
	.concel{
	color: #ccc;
    font-size: 10px;
    &:hover{
	color:#21a557;
	text-decoration:underline;
    }
	}
}

	.fans{
	float: right;
	@include font(12px,'宋体',#666);
	margin-top:4px;
}

}


.header-top-right{
	float: right;
	margin-top:26px;
	ul{
	height:20px;
	margin-top:26px;

		li{
			float:left;
			margin-right: 54px;
			a{
				font-size: 16px;
				color:#666;
				&:hover{
					color:#39a030;
				}
			}
		}
		.search{
			margin-right: 16px;
		}
	}

}
.header-middle{
	position:relative;
	 @include minWidth(100%,$commentWidth);
	height:460px;
	overflow:hidden;
	.banner-foot{
	.nav{
	position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -30px;
    z-index:9;
    font-size: 0;
    text-align: center;	
    li{
    	display: inline-block;
    	a{
    display: block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    background-color: #fff;
     @include border-radius(50%);
  

}
.selected{
	background-color: #000;
}	
	}
}
	}
}

.header-bottom{
	width:$commentWidth;
	margin:0 auto;

	ul{
		height:180px;
		margin:56px 14px 58px 4px;
		li{
			display:inline-block;
			width:344px;
			height:180px;
			margin-right: 72px;
		.product-bg{
		display:inline-block;
		width:84px;
		height:84px;
		background: #39a030;
		@include border-radius(50%);
		margin-right: 20px;
		float: left;
		img{
			margin:20px 24px;
		}
}
	.product{
		float: right;
	}
	h2{
		margin-bottom: 22px;
		@include font(22px,'微软雅黑',#676767);
		width:180px;
		}
		p{
		width:240px;
		margin-bottom: 34px;
		@include font(14px,'微软雅黑',#979797);
		}
		a{
		@include font(14px,'微软雅黑',#77bd70);
			&:hover{
		text-decoration: underline;
			}
		}
	}
	.li-style{
		margin-right:0;
	}
	}
}

.working-picture{
  	 @include minWidth(100%,$commentWidth);
	img{
		width:264px;
	}
}

.content-bg{
	background:#f8f8f8;
	@include minWidth(100%,$commentWidth);
	overflow:hidden;
	&:after{
	@include clearFloat;

	}

}
.content{
	margin-top: 84px;
	width:$commentWidth;
	margin:0 auto;

	.content-left{
	float: left;
	margin-top: 84px;

	.tab-top{
	margin-bottom: 30px;
	.products-design{
	display:inline-block;
	margin-right: -6px;
	width:200px;
	height:50px;
	background:#39a030;
	text-align:center;
	line-height:50px;
	color:#fff;
	font-family:'微软雅黑';

}
	.programming-language{
	display:inline-block;
	width:200px;
	height:50px;
	background:#fff;
	text-align:center;
	line-height:50px;
	color:#707070;
	font-family:'微软雅黑';
}
}
}
	.pager{
		float: right;
		margin:30px 14px 120px 0;
		a{
			padding: 0 16px;
			@include font(14px,'微软雅黑',#666);
		}
		.prev,.next{
		background: #9dd8b1;
		color:#fff;
		&:hover{
		cursor: pointer;	
		}
	}

		.page{
		&:hover{
		background: #9dd8b1;
		color:#fff;
		cursor: pointer;
		}
	}
		
	}


}

.tab-content,.tab-content1{
	width:962px;
	.ul-style1{
	width:956px;
	height:228px;
	margin-right: 10px;
		li{
	float: left;
	width:226px;
	height:228px;
	@include box-shadow(0px 1px 1px 0px rgba(0, 0, 0, 0.1));

		}
	
	}
	ul{
		margin-top: 20px;
		width:956px;
		height:228px;
		li{
			float: left;
			width:226px;
			height:228px;
			border:1px solid #eee;
			margin-right: 10px;
			background: #fff;
			position:relative;
			img{
				width:224px;
				height:124px;
			}
			p{
			margin:8px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			@include font(12px,'微软雅黑',#8d8d8d);
				}
			span{
				display: block;
				margin:0 0 6px 6px;
				@include font(8px,'微软雅黑',#ccc);
			}
			.span-style{
				width:38px;
				height:16px;
				border:1px solid #ddd;
				background: url(../../../images/tab-ico.jpg) no-repeat 0 center;
				text-indent: 16px;
			}
			.span-color{
				color:#ff3f00;
			}

		}
	}
}




.content-right{
	float: right;
	margin-top: 84px;
	@include box-shadow(0px 1px 1px 0px rgba(0, 0, 0, 0.1)); 
	.organization-introduction{
    width: 224px;
    height: 230px;
   @include box-shadow(0px 1px 1px 0px rgba(0, 0, 0, 0.1));
    background: #fff;
	
		h1{
	height: 55px;
    line-height: 55px;
    padding: 0 20px;
    border-bottom: 1px solid #ddd;
    @include font(16px,'微软雅黑',#5c5c5c);
		}
	.text{
	padding: 20px 23px 9px;
    color: #666;
}
	.play-video{
	position: relative;
    padding: 0 22px;
	.play{

	}
	.video-picture{

	}
}

}
	.hottest-ranking{
	background:#fff;
	margin-top: 26px;
	height:780px;
	width:224px;
	overflow:hidden;
	h1{
	height: 55px;
    line-height: 55px;
    padding: 0 20px;
    border-bottom: 1px solid #ddd;
	 @include font(16px,'微软雅黑',#5c5c5c);

}
	.hottest-list{
		.item{
	
    	
		a{
			display:block;
			padding: 20px 20px 0 20px;
			overflow: hidden;
			img{
			width:50px;
			height:50px;
			vertical-align: middle;
			float: left;

			}
			p{
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
    		padding-left: 14px;
    		 @include font(14px,'微软雅黑',#595959);
			}
			span{
			display:block;
			margin: 10px 0 0 60px;
    		height: 18px;
    		line-height: 18px;
   		 	padding-left: 16px;
    		font-size: 12px;
    		color: #999;
    		background: url(../../../images/tab-ico.jpg) no-repeat 0 center;
			text-indent: 6px;
			}
		}
		&:after{
    		@include clearFloat;
		}
	}
	}


	}
}

.footer-bg{
	background:#2c3339;
   @include minWidth(100%,$commentWidth);
	&:after{
			@include clearFloat;
	}
}
.footer{
	width:$commentWidth;
	height:262px;
	margin:0 auto;
	.footer-left{
	float: left;
	.logo{
	margin:90px 0 28px 50px;
	.logo-name{
	color:#39a030;
}
}
	p{
		margin-left: 56px;
		margin-bottom: 12px;
	 @include font(12.5px,'微软雅黑',#8b8f92);
	}

}
}

.footer-right{
	float: right;
	margin:84px 206px 0 0;
	ul{
		li{
			float: left;
		h3{
			margin-bottom: 16px;
			@include font(12.5px,'微软雅黑',#8b8f92);
			
		}
		a{
			display:block;
			margin-bottom: 16px;
			@include font(16px,'微软雅黑',#8b8f92);
			
			&:hover{
				text-decoration: underline;
			}
		}	
		.weibo-bg{
			img{
			margin-left: 18px;	
			}
			
		}
		}
		.li-style1{
			margin-right: 94px;
		}
		.li-style2{
			margin-right: 70px;
		}
		
	}

}
.appear-login{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../../images/login-bg.jpg);
    z-index: 10;
    .login-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 387px;
    height: 288px;
    margin-left: -192px;
    margin-top: -144px;
    background-color: #fff;
    h2{
    	@include font(18px,'微软雅黑',#666);
    	margin:10px 0 20px 20px;
    }
    div{
    	margin:0 0 20px 20px;
    	@include font(12px,'微软雅黑',#666);

    }
    .username{
	margin-left: 10px;
	width:200px;
	height:30px;
}
	.password{
	margin-left: 20px;
	width:200px;
	height:30px;
}
	.username-password{
	margin-left: 10px;
	margin-right: 6px;
}
	.sub{
	border:none;
	background:none;
	width:60px;
	height:30px;
	line-height:30px;
	background:#21a557;
	color:#fff;
	outline:none;
	@include border-radius(4px);
	margin-left: 120px;
	margin-bottom: 0;
}
	.close{
	position:absolute;
	top:20px;
	right:22px;
	font-size:20px;
}
    }
}
.focus{
	border:none;
	background:none;
	outline:none;
	background:rgba(33, 165, 55, 0.2);
}
.fail,.success{
	width:200px;
	color:red;
	height:80px;

}

.appear-video{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../../images/login-bg.jpg);
    z-index: 10;
	.video-bg{
	position: relative;
    margin: 0 auto;
    width: 890px;
    height: 616px;
    padding: 30px;
    background-color: #fff;

}
	h2{
		@include font(18px,'微软雅黑',#666);
    	margin:10px 0 20px 20px;
	}
	.close1{
	position: absolute;
    top: 10px;
    right: 20px;
    width: 20px;
    height: 22px;
    cursor: pointer;
	color:#666;
	font-size:40px;
}
}

.big-li{
	z-index: 3;
    position: absolute;
    left: 0;
    top: 0;
    width: 464px;
    height: 228px;
    background: #fff;
	img{
		width:224px;
		height:124px;
		float: left;
		margin:20px;
	}
.big-li-right{
	float: right;
	margin-right:50px;
	margin-top: 20px;
	h2{
	color:#666;
	margin-bottom: 18px;
	font-size:16px;
	}
	span{
		display: block;
		margin-bottom: 10px;
		color:#8d8d8d;
	}

}
.big-li-bottom{
	position:absolute;
	top:160px;
	left:20px;
	width:400px;
	overflow:visible;
	white-space:normal;
	font-size:14px;

}
}
