@charset "utf-8";

.modal {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  padding: 0;
  overflow: initial;
  z-index: 100;
}
.modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
}
.modal .button-close-modal {
  position: absolute;
  top: -10%;
  right: 0;
  background: url(../images/button-close-modal.png) no-repeat 0 0 / contain;
  width: 31px;
  height: 31px;
}

/* 동의 팝업 */
.modal .modal-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
}
.modal .modal-wrapper .button-close-modal {
  top: 5%;
  right: 2%;
}
.modal .modal-wrapper .modal-header {
  background: #352a26;
}
.modal .modal-wrapper .modal-header .headline {
  font-size: 24px;
  font-weight: 400;
  line-height: 90px;
  letter-spacing: -0.45px;
  color: #fff;
  text-align: center;
}
.modal .modal-wrapper .modal-content {
  background: #f3f3f3;
  padding: 20px;
}
.modal .modal-wrapper .modal-content .content-wrapper {
  border-radius: 8px;
  background: #fff;
  height: 480px;
  padding: 50px 18px;
  box-sizing: border-box;
  overflow-y: auto;
}
.modal.event .modal-wrapper .modal-content .content-wrapper {
  height: 244px;
}
.modal .modal-wrapper .modal-content .content-wrapper .title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.076em;
  letter-spacing: -0.45px;
  color: #000;
  margin-bottom: 30px;
}
.modal .modal-wrapper .modal-content .content-wrapper p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.555em;
  letter-spacing: -0.45px;
  color: #000;
  margin-bottom: 30px;
}
.modal .modal-wrapper .modal-content .content-wrapper p em {
  font-weight: 500;
}
.modal .modal-wrapper .modal-content .content-wrapper p strong {
  font-weight: 700;
}
.modal .modal-wrapper .modal-content .content-wrapper p strong.important {
  font-size: 22px;
}

/* contents modal */
.contents-modal {
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.contents-modal .contents-modal-container {
  border-radius: 5px;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
  background: rgba(251,251,253,0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72.917vw;
  height: var(--contents-modal-height);
  box-shadow: 1px 0 20px 0px rgba(0, 0, 0, 0.1);
}
.contents-modal .contents-modal-container .button-close-modal {
  background: url(../images/game-introduce/button-close-modal.png) no-repeat 0 0 / contain;
  position: absolute;
  top: var(--contents-modal-button-close-modal-position-top);
  right: var(--contents-modal-button-close-modal-position-top);
  width: 2.734vw;
  height: 2.63vw;
}
.contents-modal .contents-modal-container .headline-wrapper {
  position: static;
  padding-top: 2.161vw;
  margin-bottom: 1.224vw;
}
.contents-modal .contents-modal-container .headline-wrapper .headline {
  background: url(../images/game-introduce/modal-headline-game-introduce.png) no-repeat 0 0 / contain;
  width: 4.766vw;
  height: 1.198vw;
  margin: 0 auto;
}

/* swiper */
.swiper-container {
  width: 100%;
  margin: 0 auto;
}
.swiper-button-next,
.swiper-button-prev {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  top: 33.854vw;
  width: 1.458vw;
  height: 3.203vw;
}
.swiper-button-next {
  background-image: url(../images/swiper-arrow-next.png);
  right: var(--swiper-navigation-button-position-left-right);
}
.swiper-button-prev {
  background-image: url(../images/swiper-arrow-prev.png);
  left: var(--swiper-navigation-button-position-left-right);
}
.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

/* 게임소개 & 갤러리 */
.carousel-slide {
  width: 44.714vw;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.swiper-container.core-contents,
.swiper-container.game-introduce-top,
.swiper-container.gallery-top {
  height: 25.339vw;
  width: 100%;
  margin-bottom: 0.781vw;
}
.swiper-container.game-introduce-thumbs,
.swiper-container.gallery-thumbs {
  height: 8.411vw;
}

/* 핵심콘텐츠 */
.contents-modal.core-contents .contents-modal-container .headline-wrapper .headline {
  background-image: url(../images/game-introduce/headline-core-contents.png);
  width: 5.938vw;
  height: 1.224vw;
}
.contents-modal.core-contents .contents-modal-container .carousel-slide.no-thumbs {
  display: flex;
  align-items: center;
  height: 88%;
}
.contents-modal.core-contents .contents-modal-container .carousel-slide .swiper-container .swiper-slide {
  position: relative;
}
.contents-modal.core-contents .contents-modal-container .carousel-slide .swiper-container .swiper-slide .link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/game-introduce/play.png) no-repeat 0 0 / contain;
  width: var(--core-contents-modal-swiper-play-button-width-and-height);
  height: var(--core-contents-modal-swiper-play-button-width-and-height);
}

/* 갤러리 */
.contents-modal.gallery .contents-modal-container .headline-wrapper .headline {
  background-image: url(../images/media/modal-headline-gallery.png);
  width: 3.333vw;
  height: 1.198vw;
}

/* OST */
.contents-modal.ost .contents-modal-container {
  background: url(../images/media/ost-background-image-01.jpg) no-repeat 50% 0 / cover;
  background-color: #000;
  height: var(--contents-modal-height);
}
.contents-modal.ost .contents-modal-container .button-close-modal {
  top: 0;
  right: -5%;
}
.contents-modal.ost .contents-modal-container .headline-wrapper .headline {
  background-image: url(../images/media/modal-headline-ost.png);
  width: 2.578vw;
  height: 1.068vw;
}
.contents-modal.ost .contents-modal-container .ost-wrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 10vh;
  overflow: hidden;
}
.swiper-container.ost {
  position: relative;
  width: 28.542vw;
  z-index: 1;
}
.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content {
  position: relative;
  transform: translate3d(0, 1.563vw, 0);
  transition: transform 0.25s;
}
.swiper-container.ost .swiper-wrapper .swiper-slide.swiper-slide-active .ost-content {
  transform: translate3d(0, 0, 0);
}

.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content .thumbnail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75);
  width: var(--ost-swiper-thumbnail-width-and-height);
  height: var(--ost-swiper-thumbnail-width-and-height);
}
.swiper-container.ost .swiper-wrapper .swiper-slide.swiper-slide-active .ost-content .thumbnail  {
  transform: translate(-50%, -50%) scale(1);
}
.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content .thumbnail .thumbnail-image {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--ost-swiper-thumbnail-image-width-and-height);
  height: var(--ost-swiper-thumbnail-image-width-and-height);
}
.swiper-container.ost .swiper-wrapper .swiper-slide.playing .ost-content .thumbnail .thumbnail-image {
  animation: rotatingImage 40s infinite linear paused;
}
.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content .thumbnail .thumbnail-image::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 3px solid #928f89;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.swiper-container.ost .swiper-wrapper .swiper-slide.swiper-slide-active .ost-content .thumbnail .thumbnail-image::before {
  display: none;
}
.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content .thumbnail .thumbnail-image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 3px solid #928f89;
  border-radius: 50%;
  width: var(--ost-swiper-thumbnail-image-inner-circle-width-and-height);
  height: var(--ost-swiper-thumbnail-image-inner-circle-width-and-height);
}
.swiper-container.ost .swiper-wrapper .swiper-slide.swiper-slide-active .ost-content .thumbnail .thumbnail-image::after {
  border: 2px solid #fff;
}
.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content {
  width: var(--ost-swiper-thumbnail-width-and-height);
  height: var(--ost-swiper-thumbnail-width-and-height);
  margin: 0 auto;
}
.swiper-container.ost .swiper-wrapper .swiper-slide:nth-child(1) .ost-content .thumbnail .thumbnail-image {
  background-image: url(../images/media/ost-image-01.png);
}
.swiper-container.ost .swiper-wrapper .swiper-slide:nth-child(2) .ost-content .thumbnail .thumbnail-image {
  background-image: url(../images/media/ost-image-02.png);
}
.swiper-container.ost .swiper-wrapper .swiper-slide:nth-child(3) .ost-content .thumbnail .thumbnail-image {
  background-image: url(../images/media/ost-image-03.png);
}
.swiper-container.ost .swiper-wrapper .swiper-slide:nth-child(4) .ost-content .thumbnail .thumbnail-image {
  background-image: url(../images/media/ost-image-04.png);
}
.swiper-container.ost .swiper-wrapper .swiper-slide:nth-child(5) .ost-content .thumbnail .thumbnail-image {
  background-image: url(../images/media/ost-image-05.png);
}
.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content .thumbnail .thumbnail-image-cover {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.2);
  width: var(--ost-swiper-thumbnail-image-cover-width-and-height);
  height: var(--ost-swiper-thumbnail-image-cover-width-and-height);
}
.swiper-container.ost .swiper-wrapper .swiper-slide.swiper-slide-active .ost-content .thumbnail .thumbnail-image-cover {
  display: none;
}
.swiper-container.ost .swiper-wrapper .swiper-slide.swiper-slide-active .ost-content .pin {
  position: relative;
  background: url(../images/media/pin.png) no-repeat 0 0 / contain;
  width: var(--ost-progress-circle-width-and-height);
  height: var(--ost-progress-circle-width-and-height);
  offset-path: circle(50%);
  offset-distance: -25%;
  offset-rotate: auto 90deg;
  z-index: 1;
  animation-name: pinAnimate;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-timeline: auto;
  animation-range-start: normal;
}
.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content .circle {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.swiper-container.ost .swiper-wrapper .swiper-slide.swiper-slide-active .ost-content .circle {
  display: block;
}
.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content .circle .circle-border {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
}
.swiper-container.ost .swiper-wrapper .swiper-slide .ost-content .circle .circle-progress {
  fill: none;
  stroke: url('#gradient0');
  stroke-width: 4;
  /* stroke-dasharray: 1161.8; */
  stroke-dashoffset: 1161.8;
  transform-origin: center;
  transform: rotate(-90deg);
}
.swiper-container.ost .swiper-wrapper .swiper-slide:nth-child(2) .ost-content .circle .circle-progress {
  stroke: url('#gradient1');
}
.swiper-container.ost .swiper-wrapper .swiper-slide:nth-child(3) .ost-content .circle .circle-progress {
  stroke: url('#gradient2');
}
.swiper-container.ost .swiper-wrapper .swiper-slide:nth-child(4) .ost-content .circle .circle-progress {
  stroke: url('#gradient3');
}
.swiper-container.ost .swiper-wrapper .swiper-slide:nth-child(5) .ost-content .circle .circle-progress {
  stroke: url('#gradient4');
}
.contents-modal.ost .ost-controls {
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
  top: -2.161vw;
  width: 43.646vw;
  height: 8.776vw;
  margin: 0 auto;
}
.contents-modal.ost .ost-controls .ost-title {
  display: flex;
  justify-content: center;
  padding-top: 3.125vw;
}
.contents-modal.ost .ost-controls .ost-title .title {
  font-size: 0.729vw;
  font-weight: 500;
  line-height: 0.78vw;
  line-height: 29.94px;
  letter-spacing: -0.30px;
  color: #d5d5d5;
}
.contents-modal.ost .ost-controls .controls {
  position: absolute;
  bottom: 1.7969vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.516vw;
}
.contents-modal.ost .ost-controls .controls button {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  background-color: transparent;
}
.contents-modal.ost .ost-controls .controls .button-ost-prev,
.contents-modal.ost .ost-controls .controls .button-ost-next {
  width: 1.146vw;
  height: 1.198vw;
}
.contents-modal.ost .ost-controls .controls .button-ost-prev {
  background-image: url(../images/media/button-ost-prev.png);
}
.contents-modal.ost .ost-controls .controls .button-ost-next {
  background-image: url(../images/media/button-ost-next.png);
}
.contents-modal.ost .ost-controls .controls .button-ost-play {
  background-image: url(../images/media/button-ost-play.png);
  width: 1.354vw;
  height: 1.667vw;
}
.contents-modal.ost .ost-controls .controls .button-ost-pause {
  display: none;
  background-image: url(../images/media/button-ost-pause.png);
  width: 1.51vw;
  height: 1.667vw;
}
.contents-modal.ost .ost-controls.playing .controls .button-ost-play {
  display: none;
}
.contents-modal.ost .ost-controls.playing .controls .button-ost-pause {
  display: block;
}

/* animation */
@keyframes pinAnimate {
  from {
    offset-distance: -25%;
  }
  to {
    offset-distance: 75%;
  }
}
@keyframes rotatingImage {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}