.gallery {
  /*
  background: url(../sample.png) no-repeat top 126px center;
  padding-bottom: 200vh;
  */
  margin: 0 auto;
  width: 95%; }
  @media (min-width: 641px) {
    .gallery {
      max-width: 1328px;
      padding: 126px 0 200px; } }
  @media (max-width: 640px) {
    .gallery {
      padding: 45px 0; } }
  .gallery__devider {
    display: flex;
    justify-content: space-between; }
  .gallery__halfbox {
    width: 48.8%; }
  .gallery__semibox {
    width: 48%; }
    .gallery__semibox .gallery__imgbox {
      margin-bottom: 10%; }
  .gallery__3quart {
    width: 74.7%; }
    .gallery__3quart .gallery__imgbox {
      margin-bottom: 2.8%; }
  .gallery__1quart {
    width: 23.4%; }
    .gallery__1quart .gallery__imgbox:first-child {
      margin-bottom: 9.2%; }
  .gallery__imgbox {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    display: block;
    margin-bottom: 5%;
    position: relative;
    width: 100%; }
    @media (min-width: 641px) {
      .gallery__imgbox:hover .gallery__img {
        opacity: 1; } }
    @media (max-width: 640px) {
      .gallery__imgbox {
        background: none !important; }
        .gallery__imgbox .gallery__img {
          opacity: 1; } }
  .gallery__img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    transition-duration: 0.2s;
    top: 0;
    width: 100%; }

.gimg_01 {
  padding-top: 136.6%;
  background-image: url(../img/gallery/img01_off.jpg); }
  .gimg_01 .gallery__img {
    background-image: url(../img/gallery/img01_on.jpg); }

.gimg_02 {
  padding-top: 73.6%;
  background-image: url(../img/gallery/img02_off.jpg); }
  .gimg_02 .gallery__img {
    background-image: url(../img/gallery/img02_on.jpg); }

.gimg_03 {
  padding-top: 37.1%;
  background-image: url(../img/gallery/img03_off.jpg); }
  .gimg_03 .gallery__img {
    background-image: url(../img/gallery/img03_on.jpg); }

.gimg_04 {
  padding-top: 76.5%;
  background-image: url(../img/gallery/img04_off.jpg); }
  .gimg_04 .gallery__img {
    background-image: url(../img/gallery/img04_on.jpg); }

.gimg_05 {
  padding-top: 76.5%;
  background-image: url(../img/gallery/img05_off.jpg); }
  .gimg_05 .gallery__img {
    background-image: url(../img/gallery/img05_on.jpg); }

.gimg_06 {
  padding-top: 76.5%;
  background-image: url(../img/gallery/img06_off.jpg); }
  .gimg_06 .gallery__img {
    background-image: url(../img/gallery/img06_on.jpg); }

.gimg_07 {
  padding-top: 76.5%;
  background-image: url(../img/gallery/img07_off.jpg); }
  .gimg_07 .gallery__img {
    background-image: url(../img/gallery/img07_on.jpg); }

.gimg_08 {
  padding-top: 163.6%;
  background-image: url(../img/gallery/img08_off.jpg); }
  .gimg_08 .gallery__img {
    background-image: url(../img/gallery/img08_on.jpg); }

.gimg_09 {
  padding-top: 58%;
  background-image: url(../img/gallery/img09_off.jpg); }
  .gimg_09 .gallery__img {
    background-image: url(../img/gallery/img09_on.jpg); }

.gimg_10 {
  padding-top: 51.5%;
  background-image: url(../img/gallery/img10_off.jpg); }
  .gimg_10 .gallery__img {
    background-image: url(../img/gallery/img10_on.jpg); }

.gimg_11 {
  padding-top: 77.4%;
  background-image: url(../img/gallery/img11_off.jpg); }
  .gimg_11 .gallery__img {
    background-image: url(../img/gallery/img11_on.jpg); }

.gimg_12 {
  padding-top: 77.4%;
  background-image: url(../img/gallery/img12_off.jpg); }
  .gimg_12 .gallery__img {
    background-image: url(../img/gallery/img12_on.jpg); }

.gimg_13 {
  padding-top: 77.4%;
  background-image: url(../img/gallery/img13_off.jpg); }
  .gimg_13 .gallery__img {
    background-image: url(../img/gallery/img13_on.jpg); }

.gimg_14 {
  padding-top: 77.4%;
  background-image: url(../img/gallery/img14_off.jpg); }
  .gimg_14 .gallery__img {
    background-image: url(../img/gallery/img14_on.jpg); }

.gimg_15 {
  padding-top: 51.5%;
  background-image: url(../img/gallery/img15_off.jpg); }
  .gimg_15 .gallery__img {
    background-image: url(../img/gallery/img15_on.jpg); }

.gimg_16 {
  padding-top: 58.6%;
  background-image: url(../img/gallery/img16_off.jpg); }
  .gimg_16 .gallery__img {
    background-image: url(../img/gallery/img16_on.jpg); }

.gimg_17 {
  padding-top: 164.1%;
  background-image: url(../img/gallery/img17_off.jpg); }
  .gimg_17 .gallery__img {
    background-image: url(../img/gallery/img17_on.jpg); }

.gimg_18 {
  padding-top: 77.4%;
  background-image: url(../img/gallery/img18_off.jpg); }
  .gimg_18 .gallery__img {
    background-image: url(../img/gallery/img18_on.jpg); }

.gimg_19 {
  padding-top: 77.4%;
  background-image: url(../img/gallery/img19_off.jpg); }
  .gimg_19 .gallery__img {
    background-image: url(../img/gallery/img19_on.jpg); }

.gimg_20 {
  padding-top: 77.4%;
  background-image: url(../img/gallery/img20_off.jpg); }
  .gimg_20 .gallery__img {
    background-image: url(../img/gallery/img20_on.jpg); }

.gimg_21 {
  padding-top: 77.4%;
  background-image: url(../img/gallery/img21_off.jpg); }
  .gimg_21 .gallery__img {
    background-image: url(../img/gallery/img21_on.jpg); }

.gimg_22 {
  padding-top: 37.1%;
  background-image: url(../img/gallery/img22_off.jpg); }
  .gimg_22 .gallery__img {
    background-image: url(../img/gallery/img22_on.jpg); }

.gimg_23 {
  padding-top: 73.7%;
  background-image: url(../img/gallery/img23_off.jpg); }
  .gimg_23 .gallery__img {
    background-image: url(../img/gallery/img23_on.jpg); }

.gimg_24 {
  padding-top: 73.6%;
  background-image: url(../img/gallery/img24_off.jpg); }
  .gimg_24 .gallery__img {
    background-image: url(../img/gallery/img24_on.jpg); }

.gimg_25 {
  padding-top: 122.4%;
  background-image: url(../img/gallery/img25_off.jpg); }
  .gimg_25 .gallery__img {
    background-image: url(../img/gallery/img25_on.jpg); }

.gimg_26 {
  padding-top: 122.4%;
  background-image: url(../img/gallery/img26_off.jpg); }
  .gimg_26 .gallery__img {
    background-image: url(../img/gallery/img26_on.jpg); }

.gimg_27 {
  padding-top: 56.1%;
  background-image: url(../img/gallery/img27_off.jpg); }
  .gimg_27 .gallery__img {
    background-image: url(../img/gallery/img27_on.jpg); }

.gimg_28 {
  padding-top: 56.1%;
  background-image: url(../img/gallery/img28_off.jpg); }
  .gimg_28 .gallery__img {
    background-image: url(../img/gallery/img28_on.jpg); }

.modal {
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 100vh;
  width: 100%;
  z-index: 9990; }
  .modal__imgbox {
    background-repeat: no-repeat;
    background-size: contain;
    left: 2.5%;
    position: absolute;
    width: 95%; }
    @media (min-width: 641px) {
      .modal__imgbox {
        background-position: center;
        height: calc( 95vh - 80px);
        top: calc( 80px + 2.5%); } }
    @media (max-width: 640px) {
      .modal__imgbox {
        background-position: center top 25%;
        height: calc( 100vh - 100px);
        top: 100px; } }
  .modal__btn {
    border: solid 1px #fff;
    border-radius: 2px;
    cursor: pointer;
    height: 30px;
    position: absolute;
    right: -5px;
    width: 30px; }
    @media (min-width: 641px) {
      .modal__btn {
        top: -10px; } }
    @media (max-width: 640px) {
      .modal__btn {
        top: -40px; } }
    .modal__btn:before {
      background-color: #fff;
      content: "";
      display: block;
      height: 2px;
      left: 0;
      position: absolute;
      top: 50%;
      transform: rotate(45deg);
      width: 100%; }
    .modal__btn:after {
      background-color: #fff;
      content: "";
      display: block;
      height: 2px;
      left: 0;
      position: absolute;
      top: 50%;
      transform: rotate(-45deg);
      width: 100%; }

@keyframes openmodal {
  0% {
    opacity: 0;
    top: 100vh; }
  1% {
    opacity: 0;
    top: 0; }
  100% {
    opacity: 1;
    top: 0; } }

@keyframes closemodal {
  0% {
    opacity: 1;
    top: 0; }
  99% {
    opacity: 0;
    top: 0; }
  100% {
    opacity: 0;
    top: 100vh; } }

html[data-showmodal=true] {
  overflow: hidden; }
  html[data-showmodal=true] body {
    overflow: hidden; }
  html[data-showmodal=true] .modal {
    animation-name: openmodal;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out; }

html[data-showmodal=false] .modal {
  animation-name: closemodal;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out; }

/*# sourceMappingURL=gallery.css.map */