/* ------- place box colors here ------- */

:root {
  --boxCol: #006ed1;
  --ribbonCol: white;
}

/* --------------------- */

.exp_27 {
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: -1000px;
  right: -1000px;
  margin: 0 auto;
  overflow: hidden;
  z-index: 9999999;
}

.expcn_27 {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  perspective: 600px;
}

.col_27 {
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  display: none;
}

.clicker_27 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: -500px;
  right: -500px;
  margin: 0 auto;
}

/* =============================================================== */

/* =============================================================== */

.clbtn_27 {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 1%;
  right: 2%;

  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/closeBtn.png');
  background-size: cover;

  cursor: pointer;
}

/* =============================================================== */

:root {
  --holderWidth: 320px;
  --holderHeight: 450px;
}

.giftWrapper_27 {
  position: absolute;
  width: var(--holderWidth);
  height: var(--holderHeight);
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  /* transform: translateY(-50%); */
  cursor: pointer;
  transform-origin: 50% 100%;
}

.giftcn_27 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  left: 0;
  right: 0;
  margin: 0 auto;
  width: 50%;
  height: 50%;

  perspective: var(--holderHeight);
}

.rotate_container_27 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transform-style: preserve-3d;
}

.bottom_27,
.front_27,
.left_27,
.back_27,
.right_27 {
  background-color: var(--boxCol);
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: calc(var(--holderHeight) / 2);
  left: 0;
  position: absolute;
  top: 0;
  width: calc(var(--holderWidth) / 2);
}

.bottom_27 {
  transform: translateY(
      calc(50% + (var(--holderHeight) - var(--holderWidth)) / 2)
    )
    rotateX(90deg);
  height: calc(var(--holderWidth) / 2);
}

.front_27,
.left_27,
.back_27,
.right_27 {
  /* transition: transform .5s; */
  transform-origin: bottom;
  transform-style: preserve-3d;
}

.front_27::after,
.left_27::after,
.back_27::after,
.right_27::after,
.lid-top_27::after,
.lid-front_27::after,
.lid-left_27::after,
.lid-back_27::after,
.lid-right_27::after{

    background-color: var(--ribbonCol);
    content: "";
    height: 100%;
    left: calc(50% - 10px);
    position: absolute;
    transform: translateZ(1px);
    width: 20px;
  
}

.lid-top_27::before{

    background-color: var(--ribbonCol);
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    top: calc(50% - 10px);
    transform: translateZ(0.5px);
    width: 100%;
  
}

.left_27 {
  transform: translateX(calc(var(--holderWidth) / -4)) rotateY(-90deg);
}
.back_27 {
  transform: translateZ(calc(var(--holderWidth) / -4)) rotateY(180deg)
    rotateX(0);
}
.right_27 {
  transform: translateX(calc(var(--holderWidth) / 4)) rotateY(90deg);
}
.front_27 {
  transform: translateZ(calc(var(--holderWidth) / 4));
}

.lid-top_27,
.lid-left_27,
.lid-back_27,
.lid-right_27,
.lid-front_27 {
  background-color: var(--boxCol);
  border: 1px solid rgba(0, 0, 0, 0.2);
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: calc(100% + 8px);

  backface-visibility: visible;
}

.lid-top_27 {
  height: calc(var(--holderWidth) / 2 + 10px);
  top: -5px;
  transform: translateY(-50%) rotateX(90deg);
  transform-style: preserve-3d;
}

.lid-left_27,
.lid-back_27,
.lid-right_27,
.lid-front_27 {
  height: 40px;
  top: -5px;
  transform-style: preserve-3d;
}

.lid-left_27 {
  transform: translateX(calc(var(--holderWidth) / -4 - 5px)) rotateY(-90deg);
}
.lid-back_27 {
  transform: translateZ(calc(var(--holderWidth) / -4 - 5px)) rotateY(180deg);
}
.lid-right_27 {
  transform: translateX(calc(var(--holderWidth) / 4 + 5px)) rotateY(90deg);
}
.lid-front_27 {
  transform: translateZ(calc(var(--holderWidth) / 4 + 5px));
}

.lid_27 {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}

/* =============================================================== */

.exp_27 {
  width: var(--holderWidth);
  height: calc(var(--holderHeight) - 130px);
}

.icon_27,
.prod_27,
.logosmall_27 {
  position: absolute;
  width: var(--holderWidth);
  height: var(--holderHeight);
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.logosmall_27{
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/logosmall.png');
  transform-origin: 50% 0;
}

.icon_27 {
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/icon.png');
  transform-origin: 50% 95%;
  background-size: contain;
  background-position: 50% 100%;
}

.prod_27 {
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/prod.png');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  transform-origin: 50% 95%;
  background-size: contain;
}

.particles_27,
.bgb_27,
.bgp_27,
.logo_27,
.copy_27,
.cta_27 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -1000px;
  right: -1000px;
  margin: 0 auto;
  background-position: 50% 50%;
  background-size: contain;
  pointer-events: none;
  background-repeat: no-repeat;
}

.bgb_27 {
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/bgb.jpg');
  background-position: 50% 50%;
  background-size: cover;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
}

.bgp_27 {
  background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/bgp.png');
  background-position: 50% 50%;
  background-size: contain;
  width: 1920px;
  height: 100%;
}

.bgcn_27 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;

  overflow: hidden;
  /* border-radius: 50%; */
}

/* =============================================================== */

@media (pointer: coarse) {
  .logo_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/logo_mob.png');
  }

  .copy_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/copy_mob.png');
  }

  .cta_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/cta_mob.png');
  }
}

@media (pointer: coarse) and (max-width: 450px) {
}

@media (pointer: coarse) and (min-width: 450px) {
}

@media (pointer: fine), (pointer: none) {
  .logo_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/logo.png');
  }

  .copy_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/copy.png');
  }

  .cta_27 {
    background-image: url('https://dsp-media.eskimi.com/upload/rm/upload/6554a7183d59e/PS5_Gift_TO_Prod/assets/cta.png');
  }
}

@media (pointer: fine) and (any-pointer: coarse) {
}