body {
  font-family: sans-serif, serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap:40px; /* padding:0 20px; */}
.gallery .column{position:relative;}
.gallery .column img{width:100%}
.gallery .column .hover-icon{ background: rgba(247, 81, 81, 0.5); color: #fff; height: 100%; left: 0; opacity: 0;     filter: alpha(opacity=0); position: absolute; top: 0; -webkit-transition: 0.5s ease; -o-transition: 0.5s ease;  transition: 0.5s ease; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.gallery .column .hover-icon a{display:inline-block; font-size: 28px; color:#fff;}
.gallery .column .hover-icon a:hover{color:#151515;}
.gallery .column:hover .hover-icon{ opacity: 100; filter: alpha(opacity=10000); }
.fancybox-image{opacity:1;}
.fancybox-infobar{display:none;}
.fancybox-toolbar .fancybox-button{display:none;}
.fancybox-toolbar .fancybox-button--thumbs{display:none !important;}
.fancybox-navigation{display:block;}
.fancybox-toolbar .fancybox-button--close { background: none; color: #fff; font-size: 22px; height: 36px ; line-height: 36px; margin: 0 ; padding: 0 ; position: fixed; right: 0; text-align: center ; top: 0; -webkit-transition: font-size 0.2s ease; -o-transition: font-size 0.2s ease; transition: font-size 0.2s ease; display:block; height:30px; width:30px;}
.fancybox-toolbar .fancybox-button--close svg{display:none;}
.fancybox-button--close:before { content: '\f057'; font-family: FontAwesome; }
.fancybox-navigation .fancybox-button--arrow_right { height: 35px; width: 35px; border-left: 2px solid #fff; border-top: 2px solid #fff; -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); right: 20px; box-sizing: border-box; }
.fancybox-navigation .fancybox-button--arrow_right svg, .fancybox-navigation .fancybox-button--arrow_right:before{display:none;}
.fancybox-navigation .fancybox-button--arrow_left { height: 35px; width: 35px; border-left: 2px solid #fff; border-top: 2px solid #fff; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); left: 20px; box-sizing: border-box; }
.fancybox-navigation .fancybox-button--arrow_left svg, .fancybox-navigation .fancybox-button--arrow_left:before{display:none;}
.fancybox-thumbs>ul>li:before { border:0; background: #000; opacity: 0.4; }
.fancybox-thumbs>ul>li.fancybox-thumbs-active:before{opacity:0;}
.fancybox-navigation .fancybox-button:hover{opacity:0.5;}


.jg_detailnavi {
  overflow: hidden;
  text-align: center !important;
  margin-bottom: 0.9em;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.jg_detailnavi {
  padding: 20px 0;
}
.jg_iconbar {
  float: left;
  width: 40%;
  padding-top: 5px;
  text-align: center !important;
}
.jg_detailnavinext {
  float: right;
  text-align: center !important;
}


.jg_detailnaviprev, .jg_detailnavinext {
  width: 30%;
}


@media all and (min-width: 800px) {
.fancybox-thumbs { top: auto; width: auto; bottom: 0; left: 0; right : 0; height: 95px; padding: 10px 10px 5px 10px; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); }
.fancybox-show-thumbs .fancybox-inner { right: 0; bottom: 95px; }
}
@media(max-width:800px){
  .fancybox-show-thumbs .fancybox-thumbs{display:none;}
}
@media(max-width:767px){
  .gallery{grid-template-columns: repeat(1, 1fr);}
}