/* event */
@font-face {
  font-family: 'Paperlogy';
  src: 
    local('Paperlogy-4Regular'),
    url('https://inm-cdn.innisfree.com/publish/event/cmmn/Paperlogy.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';
  src: 
    local('PaperPaperlogy-6SemiBold'),
    url('https://inm-cdn.innisfree.com/publish/event/cmmn/Paperlogy-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Paperlogy';  
  src: 
    local('Paperlogy-7Bold'),
    url('https://inm-cdn.innisfree.com/publish/event/cmmn/Paperlogy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
#wrap .event_wrap {
  --evNaviHeight: 114;
  --evNaviEmFontSize: 28;
  --evNaviLineColor: #FC38A3;
}

.obj.obj1{
    top: 19%;
    left: 68%;
    width: 17% !important;
    animation: pop 1s ease-out both;
    z-index: 1;
}
.obj.obj2{
top: 24%;
    right: 14%;
    width: 12% !important;
    z-index: 0;
    animation: pixelDrop 2s steps(8, end) infinite;
    animation-delay: 0.4s;
}
.obj.obj3{
    top: 35%;
    right: 10%;
    width: 10% !important;
    z-index: 0;
    animation: pixelDrop 2s steps(8, end) infinite;
    
}
.obj.obj4{
    top: 53%;
    right: 15%;
    width: 8% !important;
    z-index: 0;
    animation: pixelDrop 2s steps(8, end) infinite;
    animation-delay: 0.2s;
    
}
.obj.obj5{
    top: 22%;
    left: 19%;
    width: 9% !important;
    z-index: 0;
    animation: pixelDrop 2s steps(8, end) infinite;
    animation-delay: 0.2s;
    
}
.obj.obj6{
    top: 38%;
    left: 11%;
    width: 11% !important;
    z-index: 0;
    animation: pixelDrop 2s steps(8, end) infinite;
    animation-delay: 0.7s;
    
}
.obj.obj7{
top: 50%;
    left: 17%;
    width: 10% !important;
    z-index: 0;
    animation: pixelDrop 2s steps(8, end) infinite;
    
}
.eveCont{
  margin: -0.2% auto!important;
}
.obj.obj10{
    top: 10%;
    left: 76%;
    width: 10% !important;
  transform-origin: center;
  animation: pixelWiggle 0.6s steps(1, end) infinite;    
}
.obj.obj11{
    top: 10%;
    left: 85%;
    width: 10% !important;
    transform-origin: center;
    animation: pixelWiggle 0.6s steps(1, end) infinite;
    animation-delay: 0.3s;
}
@keyframes pixelWiggle {
  0%, 100% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(12deg);
  }
}
@keyframes pixelDrop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20%);
  }
}
@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.2);
    opacity: 1;
  }
  85% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
.swiperfast.swiperfast1 {
    position: absolute;
    top: 30%;
    margin-left: 6%;
    width: 88%;
    overflow: hidden;
}
.swiperfast.swiperfast2 {
    position: absolute;
    top: 25%;
    margin-left: 6%;
    width: 88%;
    overflow: hidden;
}
.swiperfast.swiperfast3 {
    position: absolute;
    top: 47%;
}
.swiperfast.swiperfast3 .swiper-slide.swiper-slide-active {
transform: scale(1.22);
transition: 0.5s;
z-index: 4;
}
.rankTar{
position: absolute;
bottom: 0;
left: 0;
}
.relaymoving{
      position: absolute;
    top: 29%;
}
.eveCont .moving.newMoving{
      position:unset;
      background-color: #FC38A3;
      height: 50px;
}
.mo .moving.newMoving{
height: 2.8rem;
}
.eveCont .moving.onedayMoving{
      position:unset;
      background-color: #8800FF;
      height: 50px;
}
.mo .moving.onedayMoving{
height: 2.8rem;
}
.swiperfast .swiper-slide {
  width: calc(315 / 750 * 100%);
  margin: 0 1.334%;
}

.eveCont .countdown {
    position: absolute;
    width: calc(307 / 750 * 100%);
    height: 6.2%;
    top: 61%;
  left: 27.7%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0%;
    z-index: 2;
    color: #fff;
    font-size: 52px;
  font-weight: 700;
    font-family: Paperlogy;
}
.mo .eveCont .countdown {
  font-size: 2.7rem;
}
.eveCont .countdown span {
  flex: 1;
  color: #fff;
  font-size: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
    font-family: Paperlogy;
}

.eveCont .countdown span.Dday {
    font-family: Paperlogy;
  color: #FC38A3;
}
.eveCont .countdown span.days {
    font-family: Paperlogy;
margin-right: 5%;
  color: #FC38A3;
}
/* mo */
.mo .eveCont .countdown span {
  font-size: 2.7rem;
    font-family: Paperlogy;
}
.event_wrap .topBann.fixed {
  width: 750px;
  z-index: 4;
  position: fixed;
  top: 79px;
}
.evtSwiper.swiper1{
    position: absolute;
    top: 24%;
    left: 10%;
    width: 80% !important;
}
.eveCont .evtSwiper.swiper1 .swiper-slide {
  width: calc(670 / 750 * 100%);
  margin: 0 2.4%;
}
.event_wrap .evtNavi.line {
  padding: 0 20px;
}
.event_wrap .evtNavi.line.pr .third em {
      color: rgba(255, 255, 255, 0.5)!important;
}
.event_wrap .evtNavi.line.pr .third em:after {
      background-color: #181818;
}
.event_wrap .evtNavi.line.pr .last {
      color: rgba(255, 255, 255, 1)!important;
      border-bottom: 0.3rem solid #53d109!important;
}
.event_wrap .evtNavi.line.pr .last em:after {
      background-color: #53d109!important
}
.event_wrap .evtNavi .inner {
  gap: 32px;
}

.event_wrap .evtNavi .inner button {
  padding: 0;
}

.event_wrap .evtNavi .inner button.on em:after {
  width: 100%;
}

.event_wrap .evtNavi.hasBann.fixed {
  top: 151px !important;
}


.eve_detail .eveCont.nav .naviBtns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 92%;
    height: 83%;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    z-index: 1;
    gap: 2%;
}
.eve_detail .eveCont .naviBtns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 92%;
    height: 53%;
    position: absolute;
    left: 50%;
    top: 2%;
    transform: translateX(-50%);
    z-index: 1;
    gap: 2%;
}
.eve_detail #navi.eveCont .naviBtns {
    top: 22.5%;
    height: 58%;
}
.eveCont .fadeWrap {
    position: absolute;
    left: 50%;
    top: 0%;
    width: 90%;
    height: 60%;
    transform: translateX(-50%);
}


.eveCont .fadeInit {
  width: auto;
  position: absolute;
  opacity: 0;
  transform: translateY(-50px);  
}

.eveCont .fadeWrap.fadeUp .fadeInit {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s, transform .8s;
  will-change: opacity, transform;
}

.eveCont .fade01 {
    width: 90%;
    left: 5%;
    top: 0%;
}
.eveCont .fade02 {
    width: 100%;
    left: 0%;
    top: 28%;
}
.eveCont .fade02_2 {
    width: 100%;
    left: 0%;
    top: 17%;
}

.eveCont.fadeUp .fade02.fadeInit {
  width: 100%;
  top: 26.5%;
  left: 0;  
  transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
}
.eveCont.fadeUp .fade03.fadeInit {
  width: 100%;
  top: 63.2%;
  left: 0;  
  transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
}
.eve_detail .eveCont .naviBtns button.naviBtn {
  flex: 1 auto;
  width: 48%;
  font-size: 0;
}

.eve_detail .eveCont .naviBtns.naviGuide {
  height: 95%;
  gap: 1.5%;
}

.eve_detail .eveCont .naviBtns.naviGuide button.naviBtn {
  width: 32%;
  position: relative;
}
.eveCont .btnLive {
    width: 100%;
    height: 100%;
    bottom: 0%;

}

.eveCont .btn00 {
    width: 90%;
    height: 11%;
    bottom: 6%;

}

.eveCont#box .btn01 {
    width: 48%;
    height: 48%;
    top: 3%;
    transform: none;
    left: 0;
}
.eveCont .btnOFFLINE {
    width: 90%;
    height: 15%;
    bottom: 9%;
}
.eveCont#box .btn02 {
width: 48%;
    height: 48%;
    top: 3%;
    transform: none;
    left: 51%;
}
.eveCont#box .btn03 {
width: 48%;
    height: 48%;
    top: 54%;
    transform: none;
    left: 0;
}
.eveCont#box .btn04 {
width: 48%;
    height: 48%;
    top: 54%;
    transform: none;
    left: 51%;
}
.eveCont .btn04_2 {
width: 43%;
    height: 10%;
    bottom: 0%;
    left: 52%;
    transform: none;
}
.eveCont#box.box2 .btn01 {
width: 48%;
    height: 48%;
    top: 0%;
    transform: none;
    left: 0;
}
.eveCont#box.box2 .btn02 {
width: 48%;
    height: 48%;
    top: 0%;
    transform: none;
    left: 51%;
}
.eveCont#box.box2 .btn03 {
width: 48%;
    height: 48%;
    top: 50%;
    transform: none;
    left: 0;
}
.eveCont#box.box2 .btn04 {
width: 48%;
    height: 48%;
    top: 50%;
    transform: none;
    left: 51%;
}
.eveCont .btn01 {
width: 43%;
    height: 36%;
    bottom: 48%;
    left: 5%;
    transform: none;
}
.eveCont .btn02 {
    width: 43%;
    height: 36%;
    bottom: 48%;
    left: 52%;
    transform: none;
}
.eveCont .btn03 {
    width: 43%;
    height: 36%;
    bottom: 11%;
    left: 5%;
    transform: none;
}
.eveCont .btn04 {
    width: 43%;
    height: 36%;
    bottom: 11%;
    left: 52%;
    transform: none;
}
.eveCont .btnTAMA {
    width: 93%;
    height: 10%;
    bottom: 5%;
}
.eveCont.box2 .btn01 {
width: 43%;
    height: 38%;
    bottom: 52%;
    left: 5%;
    transform: none;
}
.eveCont.box2 .btn02 {
    width: 43%;
    height: 38%;
    bottom: 52%;
    left: 52%;
    transform: none;
}
.eveCont.box2 .btn03 {
    width: 43%;
    height: 38%;
    bottom: 12%;
    left: 5%;
    transform: none;
}
.eveCont.box2 .btn04 {
    width: 43%;
    height: 38%;
    bottom: 12%;
    left: 52%;
    transform: none;
}

.eveCont .eventLink.btnFull {
  width: 100%;
  height: 100%;
  top: 0;
}
.eveCont .eventLink.bntNavi {
  width: 100%;
  height: 100%;
  top: 0;
}
.naviBtn.roulette{
position: relative;
}

/* mo */
.mo .event_wrap .topBann.fixed {
  width: 100%;
  top: 5.8rem;
}

.mo .event_wrap .topBann.fixed img {
  height: 100%;
}

.mo .event_wrap .evtNavi.hasBann {
  top: 9.4rem !important;
}

.mo .event_wrap .evtNavi.line {
  padding: 0 1rem;
}

.mo .event_wrap .evtNavi .inner {
  gap: 1.6rem;
}

/* front */
.mo #eventTypeArea.inner_wide {
  padding: 0 0 2rem;
}

.mo #eventTypeArea.inner_wide .desc {
  margin-top: 0;
}

.mo #eventTypeArea.inner_wide .desc+.inner {
  margin: 0;
  padding-top: 2rem;
}
.obj0{
      top: 4%;
    width: 25%!important;
    left: 50%;
    transform: translate(-50%, 0px);
}
.event_wrap div[id^="prd"].box {
  margin-top: 0;
  padding-top: 50px;
}

.event_wrap div[class*="bgTarget01"] {
  background: #E8E8E8;
}
.event_wrap div[class*="bgTarget02"] {
  background: #F2DEFF;
}
.event_wrap div[class*="bgTarget03"] {
  background: #FFDEF0;
}




.eveCont .moving {
  overflow: hidden;
  position: absolute;
  bottom: 6.8%;
  left: -2%;
  white-space: nowrap;
  height: 105px;
  display: flex;
  gap: 0 10px;
}

.eveCont .moving img {
  flex-shrink: 0;
  width: auto;
  height: 100%;
  max-width: none;
  animation: moving 7.5s linear infinite;
}

@keyframes moving {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translate(-100%);
  }
}

.eveCont .moving.mv02 {
  bottom: 3.5%;
}

/* mo */
.mo .moving {
  height: 6.5rem;
  gap: 0 .5rem;
}