@media screen and (max-width: 767px) {
  #wrapper {
    padding-top: 16%;
  }
}

#popup {
  opacity: 0;
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #FF00B3;
}
@media screen and (max-width: 767px) {
  #popup {
    padding-top: 16%;
    box-sizing: border-box;
    z-index: 11;
    overflow: auto;
  }
}
#popup .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  cursor: pointer;
}
#popup .content-wrap {
  opacity: 0;
  display: table;
  table-layout: fixed;
  width: 80%;
  height: 100%;
  position: absolute;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, 0);
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  #popup .content-wrap {
    display: block;
    width: 100%;
    height: auto;
    position: static;
    transform: none;
    overflow: auto;
  }
}
#popup .content-wrap .content {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
@media screen and (max-width: 767px) {
  #popup .content-wrap .content {
    display: block;
    position: relative;
  }
}
#popup .content-wrap .content .inwrap {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  #popup .content-wrap .content .inwrap {
    width: auto;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }
}
#popup .closebtn {
  width: 12%;
  padding-top: 12%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  cursor: pointer;
  transition: opacity 200ms cubic-bezier(0.25, 0.25, 0.75, 0.75); /* linear */
}
@media screen and (max-width: 767px) {
  #popup .closebtn {
    width: 18%;
    padding-top: 18%;
  }
}
#popup .closebtn:hover {
  opacity: 0.5 !important;
}
#popup .closebtn .line {
  width: 70%;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 25%;
  left: 25%;
}
#popup .closebtn .line:nth-child(1) {
  transform-origin: left top;
  transform: rotate(45deg);
}
#popup .closebtn .line:nth-child(2) {
  left: 75%;
  transform-origin: left top;
  transform: rotate(135deg);
}
#popup .pop-nav {
  margin-bottom: 8%;
  position: relative;
}
#popup .pop-nav .prev-btn {
  width: 1.2%;
  position: absolute;
  left: 9%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
#popup .pop-nav .prev-btn .core {
  width: 100%;
  padding-top: 200%;
  background-image: url(../imgs/top/prevbtn.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
#popup .pop-nav .next-btn {
  width: 1.2%;
  position: absolute;
  right: 7.5%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
#popup .pop-nav .next-btn .core {
  width: 100%;
  padding-top: 200%;
  background-image: url(../imgs/top/nextbtn.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
#popup .thumb-wrap {
  width: 73%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
#popup .thumb-wrap:after {
  content: "";
  display: table;
  clear: both;
}
#popup .thumb-wrap {
  overflow: hidden;
}
#popup .thumb-wrap .slide-wrap {
  position: relative;
  z-index: 1;
}
#popup .thumb-wrap .thumb {
  width: 9.5%;
  margin-right: 0.55%;
  float: left;
  cursor: pointer;
  transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
}
#popup .thumb-wrap .thumb:hover {
  opacity: 0.7;
}
#popup .thumb-wrap .thumb .core {
  width: 100%;
  padding-top: 100%;
  background-size: cover;
}
#popup .thumb-wrap .thumb .core img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
#popup .img-area {
  margin-bottom: 3%;
  position: relative;
}
#popup .img-area .prev-btn {
  width: 2.5%;
  position: absolute;
  left: 16.5%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
#popup .img-area .prev-btn .core {
  width: 100%;
  padding-top: 200%;
  background-image: url(../imgs/top/prevbtn.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
#popup .img-area .next-btn {
  width: 2.5%;
  position: absolute;
  right: 13.5%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
#popup .img-area .next-btn .core {
  width: 100%;
  padding-top: 200%;
  background-image: url(../imgs/top/nextbtn.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
#popup .img-area .youtube {
  width: 100%;
  padding-top: 56.25%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #popup .img-area .youtube {
    margin-bottom: 6%;
    position: relative;
    top: auto;
    left: auto;
    overflow: visible;
  }
}
#popup .img-area .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#popup .img-wrap {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
#popup .img-wrap .img {
  width: 100%;
  position: relative;
}
#popup .img-wrap .img .core {
  opacity: 0;
  width: 100%;
  padding-top: 100%;
  position: relative;
  z-index: 1;
}
#popup .img-wrap .img .core > * {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}
#popup .img-wrap .img .core .img-core {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform: none;
}
#popup .img-wrap .img .core img {
  width: 100%;
  height: auto;
}
#popup .img-wrap .img .core video {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 11;
}
#popup .img-wrap .img .loader {
  color: #FF00B3;
  font-size: 20%;
  margin: 0px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%, 100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%, 100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@media screen and (max-width: 767px) {
  #popup .imgs {
    padding-left: 3.33%;
    padding-right: 3.33%;
    padding-bottom: 10%;
  }
  #popup .imgs .img {
    margin-bottom: 6%;
  }
  #popup .imgs img {
    width: 100%;
    height: auto;
  }
  #popup .imgs video {
    width: 100%;
    height: auto;
    vertical-align: top;
    margin-bottom: 6%;
  }
}
#popup .paging {
  margin-bottom: 5%;
  text-align: center;
  line-height: 0;
}
#popup .paging .page {
  display: inline-block;
  width: 1.2%;
  padding-top: 1.2%;
  margin-left: 8px;
  margin-right: 8px;
  border-radius: 20px;
  background-color: #000;
}
#popup .paging .page.current {
  background-color: #FF00B3;
}
#popup .detail {
  text-align: center;
}
@media screen and (max-width: 767px) {
  #popup .detail {
    width: 80%;
    padding-top: 18%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6%;
  }
}
#popup .detail p {
  font-size: 0.65rem;
}
@media screen and (max-width: 767px) {
  #popup .detail p {
    font-size: 1.75rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
}

#showcase .content {
  padding-top: 16%;
}
@media screen and (max-width: 767px) {
  #showcase .content {
    padding-top: 0%;
  }
}

#tile-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0px, 4.128440367vw, 45px);
  width: clamp(0px, 100vw, 1090px);
  padding-left: clamp(0px, 3.6697247706vw, 40px);
  padding-right: clamp(0px, 3.6697247706vw, 40px);
  box-sizing: border-box;
  margin-top: 78px;
  margin-bottom: 78px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 0;
  transition: height 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOutQuad */
}
@media screen and (max-width: 767px) {
  #tile-wrap {
    margin-top: 0;
    padding-left: 3.33vw;
    padding-right: 3.33vw;
    gap: 3.33vw;
  }
}
#tile-wrap .tile {
  width: clamp(0px, 19.7247706422vw, 215px);
  height: clamp(0px, 19.7247706422vw, 215px);
  position: relative;
  transition: opacity 300ms;
}
@media screen and (max-width: 767px) {
  #tile-wrap .tile {
    width: 45vw;
    height: 45vw;
  }
}
#tile-wrap .tile:hover {
  cursor: pointer;
}
#tile-wrap .tile .core-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#tile-wrap .tile .ttl {
  opacity: 0;
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  background-color: #FF00B3;
}
#tile-wrap .tile .ttl p {
  display: table-cell;
  vertical-align: middle;
  padding: 8%;
  color: #fff;
  font-size: 0.5rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  font-family: kiro, sans-serif;
}
#tile-wrap .tile .ttl p span {
  display: block;
  overflow: hidden;
}
#tile-wrap .tile .core {
  width: 100%;
  position: relative;
  z-index: 0;
  padding-top: 100%;
  background-size: cover;
  background-position: 50% 50%;
  transform: translate(-100%, -100%);
}
#tile-wrap .tile img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
#tile-wrap .tile .data-wrap {
  display: none;
}

#bottom-wrap {
  height: 285px;
  position: relative;
  z-index: 10;
  background-color: #FF00B3;
  text-align: center;
}
#bottom-wrap #bottom {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#bottom-wrap p {
  padding-top: 4%;
  padding-bottom: 16%;
}
@media screen and (max-width: 767px) {
  #bottom-wrap p {
    padding-top: 5%;
  }
}
#bottom-wrap img {
  width: 8.4%;
  max-width: 84px;
  height: auto;
}
@media screen and (max-width: 767px) {
  #bottom-wrap img {
    width: 12%;
  }
}