/* blog */
#blog article {
  position: relative;
  width: 24%;
  margin: 0 .5% 15px;
  background: #f7f7f7;
  border-bottom: 3px solid transparent;
}
#blog article:hover {
  border-bottom: 3px solid #222;
}
#blog a {
  text-decoration: none;
  color: #fff;
}
#blog figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  /*height:200px;*/
  background: #000;
}
#blog article img {
  width: 100%;
  height: auto;
}
#blog article:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  opacity: .2;
}
#blog figure:before, #blog figure:after {
  position: absolute;
  background: #fff;
  content: "";
  display: block;
  width: 55px;
  height: 1px;
  left: 0;
  right: 0;
  margin: auto;
  transform: scale(0);
  transition: all .4s ease-out;
  opacity: 0;
}
#blog figure:before {
  top: 45%;
  transform: translateY(-20px);
}
#blog figure:after {
  bottom: 41%;
  transform: translateY(20px);
}
#blog article:hover figure:before, #blog article:hover figure:after {
  transform: scale(1);
  opacity: 1;
}
#blog .link_layer {
  position: absolute;
  text-align: center;
  opacity: 0;
  top: 48%;
  left: 0;
  right: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: bold;
}
#blog article:hover .link_layer {
  opacity: 1;
}
#blog .blog_wrap {
  min-height: 200px;
  padding: 15px 20px;
  color: #222;
}
#blog .cate_time {
  margin-bottom: 0;
  font-size: 12px;
  font-family: 'Josefin Sans', sans-serif
}
#blog .cate_time time:after {
  content: '｜'
}
#blog .cate_time .cat {
  font-weight: bold;
}
#blog .cate_time .web {
  color: #fd4765;
}
#blog .cate_time .news {
  color: #33d291;
}
#blog .cate_time .travel {
  color: #33bad2;
}
#blog .cate_time .other {
  color: #666;
}
#blog .blog_wrap h3 {
  margin: 10px 0;
  line-height: 1.8;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}
#blog .blog_wrap .blog_txt {
  font-size: 12px;
  text-align: left;
  color: #666;
}
#blog .btn_rotate {
  margin-top: 25px;
}
@media screen and (max-width: 1400px) {
  #blog article {
    margin: 0 .5% 10px;
  }
  #blog figure {
    height: auto;
  }
  #blog .blog_wrap h3 {
    margin: 5px 0 10px;
  }  
}
@media screen and (max-width: 1200px) {
  #blog article {
    width: 31.8333%;
    margin: 0 .75% 10px;
  }
}
@media screen and (max-width: 991px) {
  #blog article {
    width: 48%;
    margin: 0 1%;
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 767px) {
  #blog .blog_wrap {
    min-height: 150px;
  }
}
@media screen and (max-width: 640px) {
  #blog .cate_time {
    font-size: 10px;
  }
}
@media screen and (max-width: 480px) {
  #blog .bg_ttl {
    z-index: 1;
  }
  #blog article {
    clear: both;
    width: 100%;
    margin: 0 auto 15px;
    border-bottom: none;
  }
  #blog article:last-child {
    margin-bottom: 0;
  }
  #blog article:hover {
    border-bottom: none;
  }
  #blog article a {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
  }
  #blog figure {
    float: left;
    width: 35%;
    background: #fafafa;
  }
  #blog article:hover img {
    transform: none;
    opacity: 1;
  }
  #blog .link_layer {
    display: none;
  }
  #blog article:hover figure:before, #blog article:hover figure:after {
    transform: none;
    opacity: 0;
  }
  #blog .blog_wrap {
    float: left;
    width: 65%;
    height: auto;
    min-height: inherit;
    padding: 0 0 0 15px;
  }
  #blog .cate_time {
    font-size: 9px;
  }
  #blog .blog_wrap h3 {
    margin: 0 0 5px;
    font-size: 12px;
    line-height: 1.6;
  }
  #blog .blog_wrap .blog_txt {
    display: none;
  }
  #blog figure:before, #blog figure:after {
    position: absolute;
    background: #fff;
    content: "";
    display: block;
    width: 55px;
    height: 1px;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0);
    transition: all .4s ease-out;
    opacity: 0;
  }
}