@keyframes att{
    0%{opacity: 0; bottom: -10px;}
    100%{opacity: 1; bottom: 45px;} 
}

@media (min-width: 960px) {
	.att_ul{display: block; padding: 10px 0; width: 960px; margin: 20px auto;}
	.att_li{display: block; width:300px; float: left; margin:20px 10px; position: relative;}
	.att_li:hover{box-shadow: inset 0 0 0 1px #111}
	.att_a{display: block; padding: 5px}
	.att_li img{display: block; width: 100%} 
	.att_li:hover .att_title{display: block; animation: att 0.6s}
	.att_title{display: none; background-color: #111; padding: 10px; font-weight: bold; overflow-y: hidden; height: 80px; position: absolute; width: 270px; bottom: 45px; text-align: center;}
	.att_title span{display: block; font-size: 18px;  margin-bottom: 5px; color: #fff;word-break:keep-all;}
	.att_title strong{display: block; font-size: 16px; color: #41B8EA; word-break:keep-all;}

	.media_wrap{width: 960px; margin: auto;border-bottom: 1px solid #ddd} 
	.media_title{font-size: 28px; font-weight: bold; display: block; margin: 30px auto 20px auto; text-align: center; color: #333; border-bottom: 3px solid #555; padding-bottom: 10px; width: 100%}
	.media_box{display: block;width: 100%; height: 0; padding-top: 56.5%; position: relative;}
	.media_box iframe{position: absolute; top:0; left: 0;}

	.m_sub_title{font-size: 24px; display: block; width: 100%; margin: auto; padding: 30px 0; border-bottom: 1px solid #ddd; color: #333; text-align: center;}
	.media_txt{width:100%; margin: auto; padding: 30px 0; font-size: 18px; color: #555; line-height: 32px;word-break:keep-all;}
	.media_txt br{content: ' '}
	.media_txt br:after{content: ' '}	

	.info_wrap{width:900px; margin: 10px auto; border-radius: 8px; height: 90px;}
	.info{height: 90px; float: left; width: 300px}
	.info img{display: block; float: left; width: 70px}
	.info p{display: block; float: left; font-size: 14px; margin-left: 20px; color: #555}
	.info strong{display: block; font-size: 17px; font-weight: bold; margin-bottom: 7px; color: #333}
}

@media (max-width: 959px) {
	.att_ul{display: block; padding: 10px; background-color: #eee; float: left;}
	.att_li{display: block; width: 50%; float: left; margin:5px 0}
	.att_a{display: block; padding: 5px}
	.att_li img{display: block; width: 100%}
	.att_title{display: block; background-color: #fff; padding: 10px; font-weight: bold; overflow-y: hidden; 	height: 100px}
	.att_title span{display: block; font-size: 15px;  margin-bottom: 5px; color: #555;word-break:keep-all;}
	.att_title strong{display: block; font-size: 14px; color: #41B8EA; font-weight: bold; word-break:keep-all;}
	
	.media_title{font-size: 20px; font-weight: bold; display: block; margin: 30px auto 20px auto; text-align: 	center; color: #333; border-bottom: 3px solid #555; padding-bottom: 10px; width: 90%}
	.media_box{display: block;width: 100%; height: 0; padding-top: 56.5%; position: relative;}
	.media_box iframe{position: absolute; top:0; left: 0;}
	
	.m_sub_title{font-size: 18px; display: block; width: 90%; margin: auto; padding: 30px 0; border-bottom: 1px 	solid #ddd; color: #333}
	.media_txt{width:90%; margin: auto; padding: 30px 0; font-size: 14px; color: #555; line-height: 22px; }
	
	.info_wrap{padding: 30px 0 10px 0; background-color: #F0EEF6; width:90%; margin: auto; border-radius: 8px}
	.info{height: 90px; padding: 0 20px}
	.info img{display: block; float: left;}
	.info p{display: block; float: left; font-size: 14px; margin-left: 20px; color: #555}
	.info strong{display: block; font-size: 15px; font-weight: bold; margin-bottom: 7px; color: #333}	
}