@charset "utf-8";


.mainLatWrap .listItem > a .txtWrap,
.mainLatWrap .listItem > a:before,
.mainLatWrap .listItem > a img{
    -webkit-transition:all 0.60s ease;
       -moz-transition:all 0.60s ease;
        -ms-transition:all 0.60s ease;
         -o-transition:all 0.60s ease;
}

.mainLatWrap .listItem > a .txtWrap > .num{
    -webkit-transition:all 0.40s ease;
       -moz-transition:all 0.40s ease;
        -ms-transition:all 0.40s ease;
         -o-transition:all 0.40s ease;    
}
.mainLatWrap .listItem > a .txtWrap > .tit{
    -webkit-transition:all 0.30s ease;
       -moz-transition:all 0.30s ease;
        -ms-transition:all 0.30s ease;
         -o-transition:all 0.30s ease;
}

.mainLatWrap                                                                    { position:relative; width:calc(100% + 30px); display:flex; flex-flow:row wrap; justify-content:flex-start; transform:translate(-15px,0); }
.mainLatWrap .listItem                                                          { position:relative; width:25%; display:inline-block; padding:15px; }
.mainLatWrap .listItem > a                                                      { position:relative; width:100%; width:100%; background:#000; display:inline-block; border:1px solid rgba(117,182,30,0); box-shadow:0px 0px 60px rgba(0,0,0,1); overflow:hidden; }
.mainLatWrap .listItem:hover > a                                                { border:1px solid rgba(117,182,30,1); }
.mainLatWrap .listItem > a img                                                  { width:100%; opacity:1; transform:scale(1); }
.mainLatWrap .listItem:hover > a img                                            { opacity:1; transform:scale(1.1); }
.mainLatWrap .listItem > a .txtWrap                                             { position:absolute; left:0px; top:0px; width:100%; padding:40px; z-index:3; opacity:0.4; }
.mainLatWrap .listItem > a .txtWrap > span                                      { display:inline-block; width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.mainLatWrap .listItem > a:before                                               { position:absolute; left:0px; top:0px; width:100%; height:100%; background:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0)); content:""; z-index:2; opacity:0.7; }
.mainLatWrap .listItem:hover > a:before                                         { opacity:1; }
.mainLatWrap .listItem:hover > a .txtWrap                                       { opacity:1; }
.mainLatWrap .listItem:hover > a .txtWrap > span                                { transform:translate(0,10px); }
.mainLatWrap .listItem > a .letCate                                             { position:absolute; left:0px; top:100%; transform:rotate(-90deg) translate(80px,0); z-index:3; }
.mainLatWrap .empty_li                                                          { width:100%; line-height:300px; display:inline-block; background:rgba(0,0,0,0.8); color:#999999; text-align:center; font-size:16px; }


@media only screen and (max-width : 1200px) {
    .mainLatWrap .listItem                                                      { width:33.3333333%; }
    .mainLatWrap .listItem:nth-of-type(7),
    .mainLatWrap .listItem:nth-of-type(8)                                       { display:none; }
}

@media only screen and (max-width : 1024px) {
    .mainLatWrap .listItem                                                      { width:50%; }
}

@media only screen and (max-width : 640px) {
    .mainLatWrap .listItem                                                      { padding:10px; }
    .mainLatWrap .listItem > a .txtWrap                                         { padding:20px; }
    .mainLatWrap .listItem > a .letCate                                         { display:none; }
    .mainLatWrap .listItem > a .txtWrap                                         { opacity:1; }
    .mainLatWrap .listItem > a img                                              { opacity:1; }
    .mainLatWrap .listItem > a:before                                           { opacity:0.8; }
}