.mainPage .news{
	position: relative;
    max-width: 550px;
    width: inherit;
    /*display: inline-block;*/
    margin-bottom: 20px;
    margin-left:  280px;
    padding-bottom:20px;
    border-bottom: 1px solid #c9c9c9;
    transition: all .5s;  
}
.mainPage .news .image{
	width: 100px;
	height: 100px;
	position: relative;
	display:inline-block;
	background-color: #c7c7c7;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.mainPage .news .detail{
    position: relative;
    bottom: 0;
    vertical-align:top;
    padding-left: 10px;
    display: inline-block;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    max-width: 410px;
    height: 100px;
}
.mainPage .news .detail .title{
	font-family: oryaniB;
	color: #32b8c9;
	padding: 2px;
	direction: ltr;
}
.mainPage .news .detail .description{
	color: #b3b3b3;
	padding: 2px;
	direction: ltr;
}
.mainPage .more{
	cursor:pointer;
	width:48px;
	margin-left: 280px;
	height: 20px;
}
.mainPage .more span{
	display:inline-block;
	margin:0 2px;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background-color: #32b8c9;
	float: left;
}
.mainPage .more .chara{
	width: 100%;
    font-size: 17px;
    color: #32b8c9;
    font-family: oryaniB;
    padding-left: 1px;
}
@media only screen and (max-width: 1000px) {
	.mainPage .news{
		margin-left: 0;
		max-width: 90%;
	}
	.mainPage .more{
		
		margin-left: 0px;
	}
}
@media only screen and (max-width: 712px) {
	.mainPage .news .detail{
		display: block;
	}
}