*,::after,::before{box-sizing:border-box}

.img-fluid{max-width:100%;height:auto}
.blog{width:100%; float:left;margin:0; }
.blog-content{width:1400px; margin: 0 auto;}
.blogContainer{ width:100%; float: left; margin: 0 0 30px;font-size: 0}
.blog-item{width:29.133333%;margin: 10px 1.9%; color: #111;font-weight:500;display: inline-block;vertical-align: top; }
.blog-item{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity .8s, -moz-transform .8s;-o-transition: opacity .8s, -o-transform .8s;-webkit-transition: opacity .8s, -webkit-transform .8s;transition: opacity .8s, transform .8s;}
.blog-item.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
@media (min-width:581px){.blog-item{-ms-flex:0 0 50%;flex:0 0 50%;}}
@media (max-width:580px){.blog-item{-ms-flex:0 0 50%;flex:0 0 50%;}}
.blog-box { width:100%; float: left; overflow: hidden;position: relative;padding:0;margin-top:0;margin-bottom:0;}
.blog-box .blog-box-img {position: relative;overflow: hidden;}
.blog-box .pblog-box-img:after {content: " ";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;
    -webkit-transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
    -o-transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);}
.blog-box .blog-box-img > img {-webkit-transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);-moz-transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
    -o-transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);margin:0;display:block}
.blog-box:hover .blog-box-img:after {background:rgba(101, 101, 101, 0.4);}
.blog-box:hover .blog-box-img > img {-moz-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05); }
.blog-box .blog-boxinfo{width: 100%; float: left; padding:20px 10px 20px; box-sizing: border-box;text-align:center;}
.blog-box .blog-boxinfo p{margin:0 0 20px;font-size: 15px; letter-spacing:0.05em; line-height: 1.7em;color: #333;}
.blog-box .blog-boxinfo h2{margin:0 0 15px; font-size:17px;letter-spacing: 0.05em;font-weight: 500;position: relative;display: inline-block;line-height: 1.7em}
.blog-box .blog-boxinfo h3{margin:0 0 10px; font-size: 11px;line-height: 1.6em;color: #777;font-weight: 900;}
.blogall{float:none;width:100%;margin:0 0 20px; display:block;position:relative;}
.blogall ul { margin:0; padding:0; list-style:none;} 
.blogall li {margin:0 15px 10px; display: inline;text-align:center;} 
.blogall a {font-size:16px;color:#171717;}
.blogall a:hover {color: #a38500;text-decoration: none;}
.inpage a {color: #a38500; font-weight:500;}
.inpage a:hover {color: #a38500;} 
.topbg{width: 100%;float: left;background-color: #f5f3f1;text-align: center;margin:120px  0 50px;padding:50px 25% 30px}
.topbg h1{font-size: 26px;letter-spacing: 0.1em;margin-bottom: 40px;text-indent: 0.1em}

@media screen and (max-width: 1600px) {
.blog-content{width:89%; }
}
@media screen and (max-width: 1200px) {
.blogContainer{margin: 0 0 10px;}
.topbg{margin:100px  0 40px;padding:40px 25% 20px}
.blog-content{width:93%; }
.blog-item{width:46%;margin: 10px 2%;}
}
@media only screen and (max-width: 980px) {
.blog-content{width:94%; }
.topbg{margin:90px  0 30px;padding:40px 15% 20px;}
.topbg h1{margin-bottom: 30px;}
}
@media only screen and (max-width: 767px) {
.blog-content{width:90%;}
.blog-item{width:100%;margin:0 0 10px;}
.blog-box .blog-boxinfo{padding:15px 5px}
.blog-box .blog-boxinfo p{margin:0 0 15px}
.blog-box .blog-boxinfo h2{margin:0 0 3px;}
.topbg{margin:80px  0 30px;padding:25px 10% 5px}
.topbg h1{font-size: 24px;margin-bottom: 20px;}
.blogall li {margin:0 10px 10px;} 
}