/* main.css ==============================================*/
/*Variable*/
/*Mixin*/
#msg-lottery .msg-wrap {
  width: 66vh;
  height: 89.32vh;
  background: none;
  box-shadow: none;
  background: url(../img/lottery-bg.png) no-repeat 0 0;
  background-size: 100% 100%;
  padding: 0;
}
#msg-lottery .msg-wrap > .close {
  top: -3.74vh;
  right: 4.18vh;
  width: 9.68vh;
  height: 9.68vh;
  background: #fff;
}
#msg-lottery .msg-wrap > .close:before, #msg-lottery .msg-wrap > .close::after {
  background-color: #e93802;
  width: 0.66vh;
  height: 5.94vh;
  top: 2.2vh;
  left: 4.4vh;
  border-radius: 11vh;
}
#msg-lottery .msg-content {
  text-align: center;
  padding: 0;
  height: 100%;
  padding-top: 11vh;
  overflow: hidden;
}
#msg-lottery .msg-content header {
  font-size: 2.86vh;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 0;
}
#msg-lottery .msg-content img {
  width: 71%;
  margin: 0 auto;
}
#msg-lottery .msg-content p {
  margin: 0.88vh 0;
}

#lottery-link {
  width: 47.74vh;
  height: 21.56vh;
  margin: 0 auto;
  margin-top: -2.2vh;
  background: url(../img/lottery-cta.png) no-repeat;
  background-size: 100%;
  position: relative;
  cursor: pointer;
  display: block;
  color: #40230e;
  display: flex;
  justify-content: center;
  align-items: center;
}
#lottery-link::before, #lottery-link:after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/lottery-cta.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: cta_light_shine 0.5s linear infinite alternate;
}
@keyframes cta_light_shine {
  0%, 40% {
    opacity: 0.5;
  }
  60%, 100% {
    opacity: 1;
  }
}
#lottery-link::before {
  background-position: 0 50%;
}
#lottery-link::after {
  background-position: 0 100%;
  animation-delay: -0.5s;
}
#lottery-link span {
  font-size: 3.96vh;
  line-height: 1.2;
  letter-spacing: 0.22vh;
  font-weight: bold;
  text-align: center;
  display: block;
  padding-right: 3.3vh;
}
#lottery-link.is-disabled {
  filter: brightness(0.7) grayscale(0.5);
  pointer-events: none;
}

.led {
  margin-top: -2.2vh;
  color: #fff;
  font-size: 2.2vh;
}
.led p {
  display: inline-block;
}

#led-timer {
  color: #ddc185;
  display: inline-block;
}

#led-txt {
  display: inline-block;
}

@media screen and (max-width: 900px) {
  #msg-lottery .msg-wrap {
    width: 45vh;
    height: 58.5vh;
  }
  #msg-lottery .msg-wrap > .close {
    top: -2.55vh;
    right: 2.85vh;
    width: 6.6vh;
    height: 6.6vh;
  }
  #msg-lottery .msg-wrap > .close:before, #msg-lottery .msg-wrap > .close::after {
    width: 0.45vh;
    height: 4.05vh;
    top: 1.5vh;
    left: 3vh;
    border-radius: 7.5vh;
  }
  #msg-lottery .msg-content {
    padding-top: 7.5vh;
  }
  #msg-lottery .msg-content header {
    font-size: 1.95vh;
  }
  #msg-lottery .msg-content p {
    margin: 0.45vh 0;
  }

  #lottery-link {
    width: 32.55vh;
    height: 14.7vh;
    margin-top: -1.5vh;
  }
  #lottery-link span {
    font-size: 2.7vh;
    letter-spacing: 0.15vh;
    padding-right: 2.25vh;
  }

  .led {
    margin-top: -1.5vh;
    font-size: 1.5vh;
  }
}