.cover

{

  position: relative;

}



.cover .lbl

{

  position: absolute;

  height: 41px;

  padding: 10px 0 0 25px;

  z-index: 100;

}



.cover .lbl span

{

  font-size: 18px;

  color: white;

}



.cover .lleft

{

  width: 127px;

  background: url('../pic/cover-1.png') no-repeat 0 0;

  margin: 50px 0 0 -20px;

}



.cover .lright

{

  width: 45px;

  background: url('../pic/cover-2.png') no-repeat 100% 0;

  /*margin: 505px 0 0 950px;*/

  position: absolute;

  bottom: 50px;

  right: 0;

}



.showcase

{

  padding: 0;

  margin: 1px 0;

  display: grid;

  grid-template-columns: repeat(3, auto);

  grid-gap: 1px;

}



.showcase > DIV

{

  width: 100%;

  /*width: calc( 100% - 2px );*/

  position: relative;

  overflow: hidden;

  margin: 0;

}

.showcase > DIV:after

{

  content: '';

  padding-top: 100%;

  display: block;

}

.showcase a

{

  display: block;

  /*width: 325px;*/

  /*height: 325px;*/

  overflow: hidden;

  /*position: relative;*/

  text-decoration: none;

  border-left: 1px solid white;

  border-right: 1px solid white;

}



.showcase a img

{

  width: 500px;

  height: 400px;

  margin: 0 auto 0 -1px;

  position: absolute;

  /* left: -104px; */

  /* top: -40px; */

  object-fit: cover;

  -webkit-transition: all 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  -o-transition: all 0.2s ease-out;

  transition: all 0.2s ease-out;

}



.showcase a:hover img

{

  width: 100%;

  height: auto;

  left: 0;

  top: -10px;

}



.showcase a p

{

  margin: 0;

  color: #333;

  background: #fff;

  font-size: 14px;

  padding: 5px 10px;

  position: absolute;

  bottom: -100px;

  height: 90px;

  left:0;

  right: 0;

  line-height: 18px;

  font-family: "Trebuchet MS", "Times New Roman", sans-serif;

  display: block;

  /*width: 305px;*/

  cursor: pointer;

  -webkit-transition: all 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  -o-transition: all 0.2s ease-out;

  transition: all 0.2s ease-out;

}



.showcase a:hover p

{

  bottom: 0;

  color: #333;

  background: #fff;

}



.showcase a span

{

  margin: 0;

  font-size: 14px;

  text-decoration: underline;

  font-family: "Trebuchet MS", sans-serif;

  color: #fff;

  background: #d74941;

  padding: 8px 10px 13px 10px;

  position: absolute;

  left: 0;

  right: 0;

  bottom: -5px;

  cursor: pointer;

  -webkit-transition: all 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  -o-transition: all 0.2s ease-out;

  transition: all 0.2s ease-out;

}



.showcase a:hover span

{

  bottom: 94px;

  background: #d74941;

}



@media all and ( max-width: 640px )

{

  .showcase

  {

    grid-template-columns: repeat(2, auto);

  }

  .cover .lright

  {

    /* display: none; */

  }

}

@media all and ( max-width: 480px )

{

  .showcase

  {

    grid-template-columns: repeat(1, minmax( 320px, 360px ) );

    grid-gap: 10px;

    justify-content: center;

  }

  .showcase > DIV

  {

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);;

  }

}

