.charity{
	padding:20px 0;
}
.charity ul {
	float: left;
    width: 100%;
}
.charity ul li{
	float: left;
    width: 16.667%;
    border-right: solid 1px #d6d6d6;
	border-bottom: solid 1px #d6d6d6;
    background-color: #fff;
}
.charity ul li:hover{
    background-color: #ff8796;
}
.charity ul li a{
    display: block;
    padding: 20px 0 10px 0;
}
.charity ul li a .pic{
	overflow: hidden;
    background-color: #FFF;
    text-align: center;
    height: 150px;
    width: 150px;
	line-height: 142px;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin: auto;
}
.charity ul li a:hover .pic{
	box-shadow: 0 4px 18px 1px rgba(0,0,0,.2);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
	border: none;
}
.charity ul li a .pic img{
	max-height:150px;
	-o-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}
/*滑過*/
.charity ul li a:hover .pic img{
	-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.charity ul li a .txt{
    text-align: center;
	padding: 5px;
}
.charity ul li a .txt .title{
	font-size: 17px;
    padding: 10px 0 0 0;
    overflow: hidden;
    color: #555;
    font-weight: bold;
    height: 68px;
    display: inline-grid;
    align-items: center;
    justify-content: center;
}
.charity ul li a:hover .txt .title{
	color: #FFF;
}
.charity ul li, .charity ul li a .pic, .charity ul li a .txt .title{
	-o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}
/**************************************************************
								         搜尋
**************************************************************/
.charity .search {
	float: left;
    width: 100%;
	padding: 10px 0 25px 0;
}
.charity .search input {
	max-width: calc(100% - 300px);
    width: 100%;
	border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.charity .advanced {
	width: 100px;
    padding: 0;
    text-align: center;
	position:relative;
}
.charity .advanced:before {
    left: 0;
    top: 10px;
}
.charity .search_button {
	width: 200px;
    text-align: center;
    padding: 0;
	border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.charity .search_button i {
	font-size: 22px;
}
.charity .search div{
	float: left;
    width: 100%;
    font-size: 14px;
}
.charity .search div a{
	color:#333;
	padding-right:10px;
}
.charity .search div a:hover{
	color:#FF9800;
}
/*------------------------------------------------------
Media Queries 
--------------------------------------------------------*/
@media (max-width:991px){
	/*平板*/
	.charity {padding:20px 5px;}
	.charity ul li {width: 33.333%;}
	
	/*搜尋*/
	.charity .search {display:block;}
	.charity .search_button span {display: none;}
	.charity .search input {max-width: calc(100% - 150px);}
	.charity .search_button {width: 50px;}
}
@media (max-width:480px){
	/*手機*/
	.charity ul li {width: 50%;}
}