/* ==========================================================================
    News Inner Content
========================================================================== */

#content h3{
	color: #565962;
	font-size: 30px;
}

#content .head,
#content .body{
	float: none;
}
/*=== Content body  ===*/

#content .body .left,
#content .body .right{
	display: inline-block;
}
#content .body > .left{
	float: left;
	width: 680px;;
}
#content .body > .right{
	width: 430px;
	float: right;
}
#content .body > .left > .title > h3,
#content .body > .right > .title > h3{
	margin-top: 10px
}
#content .body > .left > .body,
#content .body > .right > .body{
	border-top: solid 1px #d7dfdc;
	border-bottom: solid 1px #d7dfdc;
	margin-top: 32px;
	margin-bottom: 24px;
	position: relative;
}
#content .body > .left > .down {
	margin-bottom: 98px;
}

/* Left */
#content .body > .left > .body > .pic-area{
	position: relative;
}
#content .body > .left > .body > .pic-area > .pic{
	margin-top: 29px;
	margin-bottom: 35px;
}
#content .body > .left > .body > .pic-area > .date{
	background: #565962;
}
#content .body > .left > .body > .article{
	margin-bottom: 40px;
}
#content .body > .left > .body > .article p{
	font-size: 16px;
	line-height: 30px;
	color: #565962;
}
#content .body > .left > .down > .left .pager li a{
	border: 0;
	font-size: 16px;
	letter-spacing: 0px;
	color: #565962;
	border-radius: 0;
	line-height: 7px;
	padding-right: 0;
	padding-left: 0;
	border: solid 1px transparent;
}
#content .body > .left > .down > .left .pager li a:hover{
	border-bottom: solid 1px #565962;
	background: transparent;
}

#content .body > .left > .down > .left .previous > a{
	margin-right: 24px;
}
#content .body > .left > .down > .left .next > a{
	margin-left: 24px;
}
#content .body > .left > .down > .left .previous > a:before{
	content: "<";
	padding-right: 5px;
}
#content .body > .left > .down > .left .next > a:after{
	content: ">";
	padding-left: 5px;
}
#content .body > .right{
	height: 59px;
	line-height: 59px;
	position: relative;
	float: right;
}
#content .body .left .down .right{
	float: right;
}
#content .body .left .down .right .fb-share:before{
	font-family: "icomoon";
	content: "\f578";
	position: relative;
	color: #767a85;
	font-size: 31px;
	top: 16px;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
#content .body .left .down .right .fb-share:hover:before{
	color: #00a1e1;
}

/* Right */

#content .body > .right > .body{
	border-bottom: 0;
	float: left;
    margin-top: 22px;
}
#content .body > .right > .body .list-item{
	margin-top: 16px;
	margin-bottom: 8px;
}
#content .body > .right > .body > .list-item > .left,
#content .body > .right > .body > .list-item > .right{
	float: left;
}
#content .body > .right > .body > .list-item > .left{
	height: 57px;
	width: 57px;
	position: relative;
    margin-top: 13px;
    margin-right: 20px;
}
#content .body > .right > .body > .list-item > .left > .date{
	background: #565962;
	color: #FFF;
	position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
	-mos-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

#content .body > .right > .body > .list-item:hover > .left > .date{
	background: #00a1e1;
}
#content .body > .right > .body > .list-item > .right h4{
	font-size: 16px;
	font-weight: bold;
	margin-top: 13px;
	color: #565962;
}
#content .body > .right > .body > .list-item:hover > .right h4{
	text-decoration: underline;
}
#content .body > .right > .body > .list-item > .right p{
	font-size: 15px;
	line-height: 16px;
	color: #565962;
}

@media screen and (max-width: 1407px){

	#content .head .nav,
	#content .body > .left > .title,
	#content .body > .left > .body > .pic-area,
	#content .body > .left > .body > .article p{
		padding: 0 10px;
	}
	#content .body > .left > .down{
		padding-left: 10px;
	}
	#content .body > .left > .body > .pic-area > .date{
		left: auto;
	}

}

@media screen and (max-width: 1199px){

	#content .body > .left{
		width: 59%;
	}
	#content .body > .right{
		width: 39%;
	}
	#content .body > .left > .body > .pic-area > .pic > img{
		width: 100%;
	}
	#content .body > .right > .body > .list-item > .left{
		width: 20%;
		margin-right: 0;
	}
	#content .body > .right > .body > .list-item > .right{
		width: 80%;
	}

}

@media screen and (max-width: 991px){

	#content .body > .left, 
	#content .body > .right{
		display: block;
		float: left;
		width: 100%;
		height: auto;
		line-height: normal;
	}
	#content .body > .left > .title,
	#content .body > .right > .title{
		text-align: center;
	}
	#content .body > .left > .body,
	#content .body > .left > .down,
	#content .body > .right > .body{
		width: 80%;
		position: relative;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
		-mos-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#content .body > .left > .body > .pic-area{
		width: 100%;
		position: relative;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
		-mos-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#content .body > .left > .body > .pic-area .pic img{
		width: 100%;
	}
	#content .body > .right > .body{
		width: 100%;
	}
	#content .body > .left > .down > .left{
		position: relative;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
		-mos-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#content .body > .left > .down > .right{
		display: block;
	}
	#content .body > .right > .body > .list-item{
		width: 50%;
    	padding: 0 10px;
	}
}

@media screen and (max-width: 767px){
	#content .body > .left, 
	#content .body > .right{
		width: 100%;
	}
	#content .body > .left > .title h3, 
	#content .body > .right > .title h3{
		font-size: 20px;
	}

	#content .body > .left > .body > .article p{
		font-size: 13px;
		line-height: 22px;
	}
	#content .body > .left > .down {
	    margin-bottom: 20px;
	}
	#content .body > .right > .body .list-item{
		width: auto;
		padding: 0 5%;
		position: relative;
	    left: 50%;
	    -webkit-transform: translateX(-50%);
		-mos-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#content .body > .right > .body > .list-item > .left{
		width: 20%;
		height: 50px;
		margin-right: 0;
	}
	#content .body > .right > .body > .list-item > .right{
		width: 80%;
	}
	#content .body > .right > .body > .list-item > .right p{
		font-size: 13px;
		line-height: 22px;
	}
}

@media screen and (max-width: 479px){
	#content .body > .left > .body,
	#content .body > .left > .down{
		width: 100%;
	}
	#content .body > .left > .title > h3{
		font-size: 16px;
	}
	
	#content .body .left .down .right .fb-share:before{
		top: -60px;
    	right: 10px;
	}
	#content .body > .right > .body .list-item{
		padding: 0;
		margin-top: 5px;
    	margin-bottom: 0;
	}
	#content .body > .right > .body > .list-item > .right {
	    width: 80%;
	    padding-left: 10px;
	}
	#content .body > .right > .body > .list-item > .right h4{
		font-size: 14px;
		padding-right: 10px;
	}
	#content .body > .right > .body > .list-item > .right p{
		font-size: 12px;
		padding-right: 10px;
	}
}