@charset "utf-8";

video{
  width:75%;
  margin:-5rem auto 7.5rem;
  max-width:1180px;
  border:7.5px solid #0171AF;
  display: block;
  position: relative;
  z-index: 10;
}

.gallery{
  padding:4rem 0 7.5rem;
  position:relative;
}

.gallery .container{
  max-width:1000px;
  width:70%;
}

.gallery::before{
  content:"";
  position:absolute;
  width:80%;
  height:100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  top:0;
  background:#D0E1EB;
  z-index:-1;
}

.gjs-dashed .gallery-wrap {
  display:flex;
  flex-wrap:wrap;
}

.gallery-wrap {
  margin: auto;
  overflow: hidden;
  border:10px solid #0171AF;
}
.gallery-wrap.pool{
  border-color:#96CFF3;
}
.gallery-wrap.cafe{
  border-color:#B6CFDE;
}
.gallery-wrap.activity{
  border-color:#D0E1EB;
}
.img-c {
  width: calc(100% / 3);
  aspect-ratio:1/1;
  float: left;
  position: relative;
  overflow: hidden;
}

.gjs-dashed .img-w {
  position:relative;
  width:calc(100% / 3);
}

.gjs-dashed .img-w img {
  display: block;
}

.img-w {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
}

.img-w img {
  display: none;
}

.img-c {
  transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}

.img-c.active {
  width: 100% !important;
  height: 90% !important;
  position: fixed;
  z-index: 2;
  max-height: 100vh !important;
}

.img-c.postactive {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.img-c.active.positioned {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
  transition-delay: 50ms;
}

.gallery-box:not(:last-child){
  margin-bottom:100px;
}

@media (max-width: 1600px) {
  .gallery::before{
    width:90%;
  }
}

@media (max-width: 1279px) {

}

@media (max-width: 1024px) {
  .img-c.active .img-w{
    height:auto;
    aspect-ratio: 4 / 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
}

@media (max-width: 767px) {
  .gallery::before{
    width:100%;
  }
  video{
    width: 95%;
    margin: -3rem auto 5rem;
    border: 3px solid #0171AF;
  }
  .gallery .container{
    width:90%;
  }
  .marine-title{
    margin-left: 15%;
  }
  .gallery-wrap{
    border-width: 4px;
  }
  .gallery-box:not(:last-child) {
    margin-bottom: 3rem;
  }
  .gallery{
    padding: 4rem 0;
    margin-bottom: 5rem;
  }
}