/* 와이드 pc  */

.videoBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

#imgBG {
  position: fixed;
  /*고정=>fixed/ 스크롤처리=>absolute */
  left: 50%;
  top: 50%;
  /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
  width: auto;
  min-width: 100%;
  /*동영상 너비를 꽉차게*/
  height: auto;
  min-height: 100%;
  /*동영상 높이를 꽉차게*/
  transform: translateX(-50%) translateY(-46%);
  z-index: -100;
}

#content {
  width: 100%;
  margin: 0 auto;
  background: rgba(44, 0, 62, 0.9);
  position: relative;
  padding-bottom: 100px;
}

#content>section {
  margin: 0 auto;
}

#content h2 {
  position: absolute;
  top: -500px;
  width: 100%;
  text-align: center;
  font-size: var(--font-70px);
  color: var(--main-font);
  text-shadow: 1px 1px 10px rgba(0, 174, 255, 1);
}

#content .gallery-header {
  width: 90%;
  margin: 0 auto;
}

#content .gallery-header h3 {
  width: 90%;
  padding: 100px 0 20px 0;
  font-size: var(--font-60px);
}

#content .gallery-header p {
  width: 90%;
  padding-bottom: 50px;
  font-size: var(--font-26px);
  line-height: 3rem;
}

#content .masonry {
  width: 90%;
  margin: 0 auto;
}

#content .grid-item,
#content .grid-sizer {
  width: 24%;
  height: auto;
  padding: 1%;


}

#content .grid .grid-item {
  float: left;
  box-sizing: border-box;

  border-radius: 25px;
  transition: all 0.5s ease;
}



#content .grid .grid-item img,
#content .grid .grid-item video {
  border-radius: 20px;
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 0 10px 2px rgba(0, 174, 255, 0.3);

}

#content .grid .grid-item:hover img,
#content .grid .grid-item:hover video {
  filter: brightness(110%);
  transform: rotate(1deg) scale(1.01);
  box-shadow: 0 0 10px 3px rgba(255, 0, 128, 0.7);
}


.grid-item {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  opacity: 0;
  transform: scale(0.5);
}

.grid-item.is-visible {
  opacity: 1;
  transform: scale(1);
}



/* 


일반 pc 


*/
@media screen and (max-width: 1280px) {
  #content h2 {
    top: -450px;
    font-size: var(--font-70px);
  }

  #content .grid-item,
  #content .grid-sizer {
    width: 23%;
  }

  #content .gallery-header h3 {
    padding-top: 70px;
    font-size: var(--font-50px);
  }

  #content .gallery-header p {
    padding-bottom: 30px;
    font-size: var(--font-24px);
  }
}

/* 








테블릿 







*/
@media screen and (max-width: 1150px) {
  #content h2 {
    top: -450px;
    font-size: var(--font-60px);
  }

  #content .grid-item,
  #content .grid-sizer {
    width: 32%;
    padding: 0.5%;
  }

  #content .gallery-header h3 {
    padding: 70px 0 0 0;
    font-size: var(--font-44px);
  }

  #content .gallery-header p {
    padding-bottom: 30px;
    font-size: var(--font-18px);
    line-height: 1.5rem;
  }

  #content .grid-item:nth-child(3),
  #content .grid-item:nth-child(4),
  #content .grid-item:nth-child(6),
  #content .grid-item:nth-child(23),
  #content .grid-item:nth-child(13),
  #content .grid-item:nth-child(14),
  #content .grid-item:nth-child(18),
  #content .grid-item:nth-child(22) {
    display: none;
  }
}

/* 







소형 테블릿 







*/
@media screen and (max-width: 855px) {
  #content h2 {
    top: -440px;
    font-size: var(--font-50px);
  }

  #content .grid-item,
  #content .grid-sizer {
    width: 32%;
    padding: 0.5%;
  }

  #content .gallery-header h3 {
    padding: 70px 0 10px 0;
    font-size: var(--font-36px);
  }

  #content .gallery-header p {
    padding-bottom: 30px;
    font-size: var(--font-18px);
    line-height: 1.5rem;
  }

  #content .grid-item:nth-child(8),
  #content .grid-item:nth-child(15) {
    display: none;
  }

}

/* 







모바일 1






*/
@media screen and (max-width: 667px) {
  #content h2 {
    top: -430px;
    font-size: var(--font-44px);
  }

  #content .grid-item,
  #content .grid-sizer {
    width: 49%;
    padding: 1%;
  }

  #content .gallery-header h3 {
    padding: 70px 0 10px 0;
    font-size: var(--font-36px);
  }

  #content .gallery-header p {
    padding-bottom: 30px;
    font-size: var(--font-16px);
    line-height: 1.4rem;
  }

  #content .grid-item:nth-child(17) {
    display: none;
  }

}

/* 







모바일 2






*/
@media screen and (max-width: 565px) {
  #content h2 {
    top: -430px;
    font-size: var(--font-44px);
  }

  #content .gallery-header h3 {
    padding: 70px 0 10px 0;
    font-size: var(--font-34px);
  }

  #content .gallery-header p {
    padding-bottom: 30px;
    font-size: var(--font-18px);
    line-height: 1.4rem;
  }
}

/* 




모바일 3




*/
@media screen and (max-width: 467px) {
  #content h2 {
    top: -430px;
    font-size: var(--font-34px);
  }

  #content .gallery-header h3 {
    padding: 70px 0 15px 0;
    font-size: var(--font-30px);
  }

  #content .gallery-header p {
    padding-bottom: 30px;
    font-size: var(--font-14px);
    line-height: 1.2rem;
  }
}