.blog{width:100%;float:left;}
.blog-container{width:1500px;margin:20px auto 60px;}
.blog-filter{float:left;width:100%;margin:0 0 60px;text-align: center}
.blog-filter ul {margin:0; padding:0; list-style:none;} 
.blog-filter li {margin:0 9px 5px;display: inline-block; text-align:center;} 
.blog-filter a {font-size:17px;font-weight: 500; text-decoration: none;padding:12px 50px;border-radius: 50px;border: 1px solid #ccc;}
.blog-filter a:hover {color: #fff;text-decoration: none;transition: .4s;-moz-transition: .4s;-webkit-transition: .4s;-o-transition: .4s;background-color: #007cc2;border: 1px solid #007cc2}
.inpage a {color: #fff; text-decoration:none;background-color: #007cc2;padding:12px 50px;border-radius:50px;font-size:17px;font-weight: 500;border: 1px solid #007cc2}
.inpage a:hover {color: #fff;border: 1px solid #007cc2} 
.blog-inner{width: 100%;float: left}
.blog-item{width:100%;-moz-transition: opacity 0.6s, -moz-transform 0.6s;-o-transition: opacity 0.6s, -o-transform 0.6s;-webkit-transition: opacity 0.6s, -webkit-transform 0.6s;transition: opacity 0.6s, transform 0.6s;margin: 25px 0; padding-bottom: 40px; border-bottom: 1px solid #ccc;}
.blog-img{width:18%;padding: 0 28px; border-left: 1px solid #ccc;}
.blog-img img {max-width: 100%; height: auto;display: block; border-radius: 10px}
.blog-datebox{width:9%;padding: 0 20px;letter-spacing: 0; text-align: center;}
.blog-date{width: 100%; margin-bottom: 10px; font-size:26px;color: #796a56;}
.blog-date span{font-size:17px;display: block;margin-top: 5px}
.blog-date, .blog-date span{font-weight: 600;}
.blog-item a:hover{color: #e95504;}
.blog-ban{width: 100%;color: #fff;background-color: #e95504;padding:2px 2px;border-radius:40px;font-size:16px;line-height: 24px}
.blog-tx{width:73%;letter-spacing: 0.05em; padding: 0 10px;}
.blog-tx h2{ font-size: 20px; margin-bottom: 12px;font-weight: 600;text-align: justify;line-height: 1.5em}
.blog-tx p{line-height: 1.6em;height: 4.8em;overflow-y:hidden;color: #111;text-align: justify}
.blog-item, .blog-ban, .blog-tx, .blog-date, .blog-img, .blog-datebox{float: left;}

@media only screen and (max-width: 1600px) {
.blog-container{width:1200px;margin:20px auto 50px;}
.blog-datebox{width:13%;padding: 0 20px;}
.blog-tx{width:67%;}
.blog-img{width:20%;padding: 0 26px;}
}
@media only screen and (max-width: 1280px) {
.blog-container{width:88%;margin:20px auto 40px}
.blog-datebox{width:16%;padding: 0 20px;}
.blog-tx{width:62%;padding: 0 10px 0 0}
.blog-img{width:22%;padding: 0 26px;}
.blog-filter{margin-bottom:30px}
}
@media only screen and (max-width: 980px) {
.blog-container{width:90%;margin: 20px auto 30px;}
.blog-filter{margin-bottom:20px}
.blog-filter li {margin:0 6px 10px;line-height: 46px} 
.blog-filter a{padding:8px 30px;}
.inpage a {padding:8px 30px;}	
.blog-datebox{width:18%;padding:10px;}
.blog-tx{width:50%;padding: 0 10px 0 0;}
.blog-tx h2{ font-size: 18px; margin-bottom: 6px;}
.blog-img{width:32%;padding: 0 20px;}
.blog-item{margin: 20px 0; padding-bottom: 30px;}
.blog-date{margin-bottom: 10px; font-size:24px;}
.blog-ban{width:90%;margin: 0 auto}
}
@media only screen and (max-width: 767px) {
.blog-container{margin: 20px auto 30px;}
.blog-filter{margin-bottom:15px;margin-top: -5px;}
.blog-filter li {margin:0 3px 10px;line-height: 40px} 
.blog-filter a{padding:8px 20px;font-size: 15px}
.inpage a {padding:8px 20px;font-size: 15px}
.blog-img{display: none}
.blog-datebox{width:26%;}
.blog-date{margin-bottom: 10px; font-size:20px;}
.blog-date span{font-size:15px;margin-top: 5px}
.blog-tx{width:72%;padding: 0 10px 0 10px;margin-left:1%; border-left: 1px solid #ccc;}
.blog-tx h2{ font-size: 17px; margin-bottom: 6px;}
.blog-ban{font-size:14px;}
.blog-item{margin: 15px 0; padding-bottom: 20px;}
}