@charset "utf-8";

#banner_type {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto 10px auto;
}
#banner_type:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#banner_type ul {
  width: 100%;
}
#banner_type ul:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#banner_type ul li {
  display: block;
  float: left;
  position: relative;
  width: 25%;
  height: 76.41px;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}
#banner_type ul li .img {
  margin: 1px;
  padding: 0px; /*border:solid 1px #ccc;*/
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}
#banner_type ul li .img img {
  width: 100%;
  height: auto;
}
#banner_type ul li a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  padding: 0;
  color: #fff;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  background: #000;
  filter: alpha(opacity=0); /* ie  */
  -moz-opacity: 0; /* old mozilla browser like netscape  */
  -khtml-opacity: 0; /* for really really old safari */
  opacity: 0; /* css standard, currently it works in most modern browsers like firefox,  */

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#banner_type ul li a:hover {
  filter: alpha(opacity=70); /* ie  */
  -moz-opacity: 0.7; /* old mozilla browser like netscape  */
  -khtml-opacity: 0.7; /* for really really old safari */
  opacity: 0.7; /* css standard, currently it works in most modern browsers like firefox,  */
}
#banner_type ul li a .subject {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  margin: -6px 0 0 0;
  font-size: 20px;
}

@media screen and (max-width: 1024px) {
  #banner_type ul li {
    width: 33.3%;
  }
}

@media screen and (max-width: 768px) {
  #banner_type {
    margin: 10px auto 10px auto;
  }
  #banner_type ul li {
    display: block;
    float: left;
    position: relative;
    width: 50%;
    height: 49px;
  }
}