@charset "UTF-8";
/*
 * product
 */

.gallery {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.gallery li {
  position: relative;
  overflow: hidden;
  flex-basis: 32%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.gallery li:nth-child(3n) {
  margin-right: 0;
}
.gallery li:last-child {
  margin-bottom: 0;
}
.gallery li div {
  transition: all .25s ease-out;
  transform: scale(1);
}
.gallery li div:hover {
  transition: all .25s ease-out;
  transform: scale(1.2);
}
.gallery li a {
  color: #333;
  font-weight: bold;
  padding: 33% 0;
  transition: all .25s ease-out;
}
.gallery li a:hover {
  opacity: 1;
  background-color: rgba(255,255,255,0.7);
}
.gallery li a span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 25px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  transition: all .25s ease-out;
}
.gallery li a span:hover {
  opacity: 1;
  top: 0;
  z-index: 2;
  transition: all .3s ease-in;
}
.gallery li .bg1 {
  background: url("../images/product/bg01.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg2 {
  background: url("../images/product/bg02.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg3 {
  background: url("../images/product/bg03.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg4 {
  background: url("../images/product/bg04.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg5 {
  background: url("../images/product/bg05.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg6 {
  background: url("../images/product/bg06.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg7 {
  background: url("../images/product/bg07.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg8 {
  background: url("../images/product/bg08.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg9 {
  background: url("../images/product/bg09.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg10 {
  background: url("../images/product/bg10.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg11 {
  background: url("../images/product/bg11.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg12 {
  background: url("../images/product/bg12.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg13 {
  background: url("../images/product/bg13.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg14 {
  background: url("../images/product/bg14.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg15 {
  background: url("../images/product/bg15.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg16 {
  background: url("../images/product/bg16.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg17 {
  background: url("../images/product/bg17.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg18 {
  background: url("../images/product/bg18.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg19 {
  background: url("../images/product/bg19.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg20 {
  background: url("../images/product/bg20.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg21 {
  background: url("../images/product/bg21.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg22 {
  background: url("../images/product/bg22.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg23 {
  background: url("../images/product/bg23.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg24 {
  background: url("../images/product/bg24.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg25 {
  background: url("../images/product/bg25.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg26 {
  background: url("../images/product/bg26.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg27 {
  background: url("../images/product/bg27.png") no-repeat 0 0;
  background-size: cover;
}
.gallery li .bg28 {
  background: url("../images/product/bg28.png") no-repeat 0 0;
  background-size: cover;
}

.product dl {
  font-size: 14px;
}
.product dl dt {
  font-weight: bold;
}
.product dl dd a {
  display: inline-block;
}
@media screen and (max-width: 750px) {
  .product .sec {
    margin-bottom: 50px;
  }
  .product .sec .secBox:nth-child(1) {
    margin-bottom: 37px;
  }
  .product .sec .tit {
    text-align: center;
  }
  .gallery li {
    position: relative;
    overflow: hidden;
    flex-basis: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
  }
  .gallery li:nth-child(3n) {
    margin-right: 2%;
  }
  .gallery li:nth-child(even) {
    margin-right: 0;
  }
  .gallery li a {
    font-size: 13px;
  }
}
@media screen and (max-width: 375px) {
  .gallery li a {
    font-size: 10px;
  }
}