@charset "utf-8";

/*------------------------------------------------------------
------------------------------------------------------------*/
.main {
    margin:80px 0 50px;
}
.main .photoUl {
    width: 1428px;
    margin-right: -28px;
}
.main .photoUl li {
    float: left;
    width:329px;
    font-size: 18px;
    margin: 0 28px 55px 0;
    overflow: hidden;
}
.main .photoUl li a {
    display: block;
    position: relative;
}
.main .photoUl li span {
  text-align: left;
  padding: 8px 15px;
  font-size: 18px;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: -43px;
  width: 100%;
  transition: all .3s;
  background: rgba(0,0,0,0.7);
}
.main .photoUl li a:hover span {
     bottom:0;
}
.main .photoUl li a{ display:block; width:100%; }
.main .photoUl li img {
    max-width: 380px;
width:100%; max-height:200px;
    transition: all 0.3s;
}
.main .photoUl li a:hover img {
   transform: scale(1.1); 
}
@media all and (min-width: 1025px) and (max-width: 1400px) {
    .main .photoUl {
        width: auto;
        margin: 0 20px;
    }
    .main .photoUl li {
        margin: 0 2.6666% 20px 0;
        float: left;
        width: 23%;
    }
    .main .photoUl li:nth-child(4n) {
        margin-right: 0;
    }
}

@media all and (min-width: 768px) and (max-width: 1024px) {
    .main {
        margin: 30px 0;
    }
    .main .photoUl {
        width: auto;
        margin: 0 8px;
    }
    .main .photoUl li {
        margin: 0 2% 20px 0;
        float: left;
        width: 49%;
    }
    .main .photoUl li:nth-child(2n) {
        margin-right: 0;
    }
    .main .photoUl li img {
        max-width: 100%;
        width: 100%;
    }
    .main .photoUl li span {
        bottom: 0;
    }

}

@media all and (min-width: 0) and (max-width: 767px) {
    .main {
        margin: 30px 0;
    }
    .main .photoUl {
        width: auto;
        margin: 0 8px;
    }
    .main .photoUl li {
        margin: 0 0 20px;
        float: none;
        width: auto;
    }
    .main .photoUl li img {
        width: 100%;
        max-width: 100%;
    }
    .main .photoUl li span {
        bottom: 0;
    }


}