@charset "UTF-8";

.gallery-list {display: flex; flex-wrap: wrap;}
.gallery-list > li {width: calc(94% / 4);box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.06);margin-right: 2%;border-radius: 20px;overflow: hidden;margin-bottom: 30px;position: relative;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);isolation: isolate;}
.gallery-list > li:nth-of-type(4n) {margin-right:0}
.gallery-list > li:hover {box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.17); transition: 0.3s;}
.gallery-list > li:hover a:before {opacity: 1;/* z-index: 1; */transition: 0.3s;}
.gallery-list > li:hover a .text-wrap .etc span i {color: #fff !important;transition: 0.5s;background: #4084e0;right: -5px;}
.gallery-list > li:hover a .text-wrap .title {color: #000; transition: 0.3s;}
.gallery-list > li a {height: 100%; display: block;}
.gallery-list > li a:before {content: '';border: 4px solid #4084e0;width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 20px;opacity: 0;z-index: 1;transition: 0.3s;}
.gallery-list > li a .img-wrap {aspect-ratio: 4/3;border: none;border-radius: 0; background: #ececec !important;}
.gallery-list > li a .img-wrap img { height: 100%; width: 100%; object-fit: cover;}
.gallery-list > li a .text-wrap {padding: 18px 21px;}
.gallery-list > li a .text-wrap .title {margin-bottom: 18px;font-weight: bold;font-size: 20px;min-height: 54px;transition: 0.3s;word-break: break-all;display: -webkit-box;overflow: hidden;line-height: 1.35;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.gallery-list > li a .text-wrap .etc  {position: relative;}
.gallery-list > li a .text-wrap .etc span {color: #999;font-size: 16px;}
.gallery-list > li a .text-wrap .etc span:last-child {}
.gallery-list > li a .text-wrap .etc span i {color: #bbb;transition: 0.5s;background: #fff;border-radius: 50px;padding: 10px;line-height: 1;width: 35px;height: 35px;right: 3px;position: absolute;bottom: -2px;}

@media (max-width:1400px) {
  .gallery-list > li {width: calc(100% / 3 - 17px);margin-right: 25px !important;}
  .gallery-list > li:nth-of-type(3n) {margin-right: 0 !important;}
  .gallery-list > li a .text-wrap {padding: 15px 18px 13px;}
  .gallery-list > li a .text-wrap .title {font-size: 19px;min-height: 46px;line-height: 1.2;}
  .gallery-list > li a .text-wrap .etc span {font-size: 15px;}
  .gallery-list > li a .text-wrap .etc span i {right: -5px;}
}


@media (max-width:768px) {
    .gallery-list {justify-content: space-between;}
    .gallery-list > li {width: 49%;margin-right: 0 !important; border-radius: 15px;}
    .gallery-list > li a:before {border-radius: 15px;}
}

@media (max-width:550px) {
    .gallery-list > li {width: 100%; margin-bottom: 20px; }
    .gallery-list > li:last-child {margin-bottom: 0%; }
    .gallery-list > li a .text-wrap .title {min-height: auto; font-size: 17px;}
}