@charset "UTF-8";
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');


::selection {
  color: #fff;
  background-color: #295b55;
}
html {
  /*background-color: black;*/
}
body {
  background-color: #e2cdc0;
  font-family: 'Century Gothic' , 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  font-weight: 400;
  scroll-behavior: smooth;
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}

body.modal-open {
  overflow: visible!important;
  padding-right: 0!important;
}

body.body-fixed {
  width: 100%;
  position: fixed;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(../images/concrete-wall.png);
  z-index: 99;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

.outer-border {
  border: 5px solid #519ca0;
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
}
@media (min-width: 992px) {
  .outer-border {
    border: 5px solid #519ca0;
    position: absolute;
    top: 75px;
    right: 75px;
    bottom: 75px;
    left: 75px;
  } 
}
.outer-border-header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}
.outer-border-header::before {
  content: '';
  display: block;
  position: absolute;
  top: -15px;
  left: -15px;
  width: 50px;
  height: 50px;
  background-image: url(../images/circle-one.png);
  background-size: contain;
}
.outer-border-header::after {
  content: '';
  display: block;
  position: absolute;
  top: -15px;
  right: -15px;
  width: 50px;
  height: 50px;
  background-image: url(../images/circle-one.png);
  background-size: contain;
}

@media (min-width: 992px) {
  .outer-border-header::before {
    content: '';
    display: block;
    position: absolute;
    top: -40px;
    left: -40px;
    width: 116px;
    height: 116px;
    background-image: url(../images/circle-one.png);
  }
  .outer-border-header::after {
    content: '';
    display: block;
    position: absolute;
    top: -40px;
    right: -40px;
    width: 116px;
    height: 116px;
    background-image: url(../images/circle-one.png);
  }
}

.outer-border-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 4;
}

.outer-border-footer::before {
  content: '';
  display: block;
  position: absolute;
  bottom: -15px;
  left: -15px;
  width: 50px;
  height: 50px;
  background-image: url(../images/circle-one.png);
  background-size: contain;
}
.outer-border-footer::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -15px;
  right: -15px;
  width: 50px;
  height: 50px;
  background-image: url(../images/circle-one.png);
  background-size: contain;
}

@media (min-width: 992px) {
  .outer-border-footer::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 116px;
    height: 116px;
    background-image: url(../images/circle-one.png);
  }
  .outer-border-footer::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 116px;
    height: 116px;
    background-image: url(../images/circle-one.png);
  }  
}


.inner-border-left-board,
.inner-border-right-board {
  display: none;
}
@media (min-width: 992px) {
  .inner-border-left-board,
  .inner-border-right-board {
    display: block;
  }
  .inner-border-left-board {
    position: absolute;
    top: 50%;
    margin-top: -292px;
    left: -58px;
    width: 116px;
    height: 584px;
    z-index: 5;
  }
  .inner-border-right-board {
    position: absolute;
    top: 50%;
    margin-top: -292px;
    right: -58px;
    width: 116px;
    height: 584px;
    z-index: 5;
  } 
}

.star-loop {
  display: none;
}
@media (min-width: 1920px) {
  .star-loop {
    display: block;
    position: absolute;
    top: 43%;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
  }
}
.star-loop-left {
  position: absolute;
  top: 0;
  left: -10%;
  width: 20%;
  animation: starLoopLeft 30s linear infinite;
}
@keyframes starLoopLeft {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.star-loop-right {
  position: absolute;
  top: 0;
  right: -10%;
  width: 20%;
  animation: starLoopRight 30s linear infinite;
}
@keyframes starLoopRight {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.inner-border {
  border: 2px solid #295b55;
  background-color: #519ca0;
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  box-shadow: inset 5px 0px 5px rgba(0,0,0,0.15), inset -5px 0px 5px rgba(0,0,0,0.15), inset 0px 5px 5px rgba(0,0,0,0.15), inset 0px -5px 5px rgba(0,0,0,0.15) ;
}
@media (min-width: 992px) {
  .inner-border {
    border: 5px solid #295b55;
    background-color: #519ca0;
    position: absolute;
    top: 95px;
    right: 95px;
    bottom: 95px;
    left: 95px;
    box-shadow: inset 5px 0px 5px rgba(0,0,0,0.15), inset -5px 0px 5px rgba(0,0,0,0.15), inset 0px 5px 5px rgba(0,0,0,0.15), inset 0px -5px 5px rgba(0,0,0,0.15) ;
  }  
}
.inner-border-header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.inner-border-header::before {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 35px;
  height: 35px;
  background-image: url(../images/inner-border-top-left.png);
  background-size: contain;
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.25) );
}
.inner-border-header::after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  width: 35px;
  height: 35px;
  background-image: url(../images/inner-border-top-right.png);
  background-size: contain;
  filter: drop-shadow(-5px 5px 5px rgba(0,0,0,0.25) );
}
@media (min-width: 992px) {
  .inner-border-header::before {
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 77px;
    height: 77px;
    background-image: url(../images/inner-border-top-left.png);
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.25) );
  }
  .inner-border-header::after {
    content: '';
    display: block;
    position: absolute;
    top: -5px;
    right: -5px;
    width: 77px;
    height: 77px;
    background-image: url(../images/inner-border-top-right.png);
    filter: drop-shadow(-5px 5px 5px rgba(0,0,0,0.25) );
  }
}
.inner-border-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.inner-border-footer::before {
  content: '';
  display: block;
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 35px;
  height: 35px;
  background-image: url(../images/inner-border-bottom-left.png);
  background-size: contain;
  filter: drop-shadow(5px -5px 5px rgba(0,0,0,0.25) );
}
.inner-border-footer::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 35px;
  height: 35px;
  background-image: url(../images/inner-border-bottom-right.png);
  background-size: contain;
  filter: drop-shadow(-5px -5px 5px rgba(0,0,0,0.25) );
}
@media (min-width: 992px) {
  .inner-border-footer::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 77px;
    height: 77px;
    background-image: url(../images/inner-border-bottom-left.png);
    filter: drop-shadow(5px -5px 5px rgba(0,0,0,0.25) );
  }
  .inner-border-footer::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 77px;
    height: 77px;
    background-image: url(../images/inner-border-bottom-right.png);
    filter: drop-shadow(-5px -5px 5px rgba(0,0,0,0.25) );
  }
}

.landing-border {
  border: 5px solid #e2cdc0;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  /*height: 40%;*/
  /*padding-top: 540px;*/
  padding-top: 80%;
  z-index: 1;
}

.landing-border::before {
  content: '';
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 35px;
  height: 35px;
  z-index: 2;
  background-image: url(../images/landing-border-top-left.png);
  background-size: contain;
}
.landing-border::after {
  content: '';
  display: block;
  position: absolute;
  top: -5px;
  right: -5px;
  width: 35px;
  height: 35px;
  z-index: 2;
  background-image: url(../images/landing-border-top-right.png);
  background-size: contain;
}
@media (min-width: 992px) {
  .landing-border {
    border: 10px solid #e2cdc0;
    position: absolute;
    top: 130px;
    right: 130px;
    left: 130px;
    /*height: 40%;*/
    /*padding-top: 540px;*/
    padding-top: 28%;
    z-index: 1;
  }
  .landing-border::before {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 73px;
    height: 73px;
    z-index: 2;
    background-image: url(../images/landing-border-top-left.png);
  }
  .landing-border::after {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 73px;
    height: 73px;
    z-index: 2;
    background-image: url(../images/landing-border-top-right.png);
  }
}
.landing-border-left {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    45deg,
    #519ca0,
    #519ca0 5px,
    #e2cdc0 5px, 
    #e2cdc0 10px
  );
}
.landing-border-right {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    135deg,
    #519ca0,
    #519ca0 5px,
    #e2cdc0 5px, 
    #e2cdc0 10px
  );
}

@media (min-width: 992px) {
  .landing-border-left {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: repeating-linear-gradient(
      45deg,
      #519ca0,
      #519ca0 10px,
      #e2cdc0 10px, 
      #e2cdc0 20px
    );
  }
  .landing-border-right {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
    background: repeating-linear-gradient(
      135deg,
      #519ca0,
      #519ca0 10px,
      #e2cdc0 10px, 
      #e2cdc0 20px
    );
  }
}

.landing-round-plate {
  position: absolute;
  /*width: 665px;*/
  width: 100%;
  /*height: 665px;*/
  /*top: -50px;*/
  top: 50%;
  left: 50%;
  /*margin-left: -20%;*/
  transform:  translate(-50%, -50%);
  z-index: 2;
  perspective: 1000px;
}
@media (min-width: 992px) {
  .landing-round-plate {
    position: absolute;
    /*width: 665px;*/
    width: 40%;
    /*height: 665px;*/
    /*top: -50px;*/
    top: 50%;
    left: 50%;
    /*margin-left: -20%;*/
    transform:  translate(-50%, -50%);
    z-index: 2;
  }  
}

.landing-radial-beam {
  position: absolute;
  /*width: 564px;*/
  /*width: 33.97%;*/
  width: 84%;
  /*height: 564px;*/
  top: 50%;
  left: 50%;
  margin-top: -42%;
  margin-left: -42%;
  z-index: 2;
  animation: landingRadialBeam 30s linear infinite;
}
@keyframes landingRadialBeam {
  from {
    /*transform: rotate3d(0,0,1, 0deg);*/
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    /*transform: rotate3d(0,0,1, 360deg);*/
  }
}
.landing-clock {
  position: absolute;
  /*width: 389px;*/
  width: 23.43%;
  width: 58.49%;
  /*height: 530px;*/
  top: 50%;
  left: 50%;
  margin-top: -40%;
  margin-left: -29.245%;
  z-index: 2;
  animation: landingClock 3s ease infinite;
}

@keyframes landingClock {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  5%,
  10% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  15%,
  25%,
  35%,
  45% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  20%,
  30%,
  40% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.landing-event-name-banner {
  position: absolute;
  /*width: 624px;*/
  width: 100%;
  /*height: 153px;*/
  bottom: 5%;
  left: 50%;
  /*margin-left: -312px;*/
  margin-left: -50%;
  z-index: 3;
}
.landing-red-ribbon {
  position: absolute;
  /*width: 899px;*/
  width: 100%;
  /*height: 261px;*/
  top: -10%;
  left: 50%;
  /*margin-left: -450px;*/
  margin-left: -50%;
  z-index: 5;
}
@media (min-width: 992px) {
  .landing-event-name-banner {
    position: absolute;
    /*width: 624px;*/
    width: 37.59%;
    /*height: 153px;*/
    bottom: 0;
    left: 50%;
    /*margin-left: -312px;*/
    margin-left: -18.79%;
    z-index: 3;
  }
  .landing-red-ribbon {
    position: absolute;
    /*width: 899px;*/
    width: 54.15%;
    /*height: 261px;*/
    top: -100px;
    left: 50%;
    /*margin-left: -450px;*/
    margin-left: -27.07%;
    z-index: 2;
  }
}

#mainWrapper {
  /*padding-top: 800px;*/
  padding-top: 95%;
}
@media (min-width: 992px) {
  #mainWrapper {
    /*padding-top: 800px;*/
    padding-top: 41.66%;
  }  
}
.landing-left-hand {
  position: absolute;
  /*width: 643px;*/
  width: 50%;
  /*height: 368px;*/
  top: 4%;
  left: -15%;
  z-index: 3;
  animation: landingLeftHand 10s ease infinite;
  filter: drop-shadow(15px 15px 25px rgba(0,0,0,0.25));
}
@keyframes landingLeftHand {
  0% {
    transform: translate3d(0,10px,0);
  }
  50% {
    transform: translate3d(0,-10px,0);
  }
  100% {
    transform: translate3d(0,10px,0);
  }
}
@media (min-width: 992px) {
  .landing-left-hand {
    position: absolute;
    /*width: 643px;*/
    width: 37.16%;
    /*height: 368px;*/
    top: 4%;
    left: 0;
    z-index: 3;
    animation: landingLeftHand 10s ease infinite;
    filter: drop-shadow(15px 15px 25px rgba(0,0,0,0.25));
  }

  @keyframes landingLeftHand {
    0% {
      transform: translate3d(0,30px,0);
    }
    50% {
      transform: translate3d(0,-30px,0);
    }
    100% {
      transform: translate3d(0,30px,0);
    }
  }
}
.landing-right-hand {
  position: absolute;
  max-width: 654px;
  width: 50%;
  /*height: 502px;*/
  /*top: 240px;*/
  top: 6%;
  right: -15%;
  z-index: 3;
  animation: landingRightHand 10s ease infinite;
  filter: drop-shadow(-15px 15px 25px rgba(0,0,0,0.25));
}
@keyframes landingRightHand {
  0% {
    transform: translate3d(0,-10px,0);
  }
  50% {
    transform: translate3d(0,10px,0);
  }
  100% {
    transform: translate3d(0,-10px,0);
  }
}
@media (min-width: 992px) {
  .landing-right-hand {
    position: absolute;
    width: 654px;
    width: 37.8%;
    /*height: 502px;*/
    /*top: 240px;*/
    top: 8%;
    right: 0;
    z-index: 3;
    animation: landingRightHand 10s ease infinite;
    filter: drop-shadow(-15px 15px 25px rgba(0,0,0,0.25));
  }

  @keyframes landingRightHand {
    0% {
      transform: translate3d(0,-30px,0);
    }
    50% {
      transform: translate3d(0,30px,0);
    }
    100% {
      transform: translate3d(0,-30px,0);
    }
  }
}

.landing-bag-1,
.landing-bag-2 {
  display: none;
}
.landing-coin-1 {
  position: absolute;
  width: 28%;
  bottom: 15%;
  left: -6%;
  z-index: 2;
}
.landing-coin-2 {
  position: absolute;
  width: 33%;
  top: 60%;
  right: -3%;
  z-index: 2;
}
@media (min-width: 992px) {
  .landing-bag-1,
  .landing-coin-1,
  .landing-bag-2,
  .landing-coin-2 {
    display: block;
  }
  .landing-bag-1 {
    position: absolute;
    /*width: 334px;*/
    width: 20.12%;
    /*height: 290px;*/
    /*top: 300px;
    left: 60px;*/
    bottom: 0;
    left: 2%;
    z-index: 2;
  }
  .landing-coin-1 {
    position: absolute;
    /*width: 231px;*/
    width: 13.91%;
    /*height: 214px;*/
    /*top: 400px;
    left: 200px;*/
    bottom: -5%;
    left: 10%;
    z-index: 2;
  }
  .landing-bag-2 {
    position: absolute;
    /*width: 273px;*/
    width: 16.44%;
    /*height: 352px;*/
    top: 5%;
    right: 5%;
    z-index: 2;
  }
  .landing-coin-2 {
    position: absolute;
    width: 274px;
    width: 16.5%;
    /*height: 235px;*/
    top: 33%;
    right: 10%;
    z-index: 2;
  }
}


.event-btn-group {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%,50%,0);
}

@media (min-width: 992px) {
  .event-btn {
    transition: all .2s ease;
  }
  .event-btn:hover {
    transform: translateY(-5px);
    transition: all .2s ease;
  }
}

#eventLogo {
  width: 100%;
  transition: all .3s linear;
  animation-delay: 1s;
  animation-duration: 2s;
}
#eventLogo a {
  cursor: initial;
}

.landing-glow {
  mix-blend-mode: screen;
}
#btnGroup {
  width: 80%;
  max-width: 240px;
  position: relative;
  transform: translateY(0%);
  transition: all 5s ease-in;
}

body.loaded #btnGroup {
  transform: translateY(0%);
}





@media (min-width: 992px) {
  #btnGroup {
    transform: translateY(0%);
  }
  body.loaded #btnGroup {
    transform: translateY(0%);
  }
}

@media (min-width: 1600px) {
  
  #eventLogo {
    max-width: 100%;
  }
  #btnGroup {
    max-width: 260px;
  }
}
@media (min-width: 2560px) {
  
  #mainWrapper {
    /*padding-right: 30%;*/
  }
}

#btnGroup a {
  display: block;
  position: relative;
  outline: none;
}



#btnPlay,
#btnHome,
#btnViVa {
  display: none;
}

#msgDone,
#msgFull {
  display: none;
}



#loginLoading,
#loginSuccess,
#checkInSuccess {
  z-index: 200;
  background-color: #000;
}

.event-board {
  position: relative;
  margin-bottom: 15%;
  padding: 0 10%;
}
.event-rule,
.event-precaution {
  position: relative;
  max-width: 1100px;
  width: 90%;
  /*border-top: 5px dotted #e2cdc0;*/
  font-size: 1rem;
}
.event-precaution {
  margin-bottom: 10%;
}
@media (min-width: 992px) {
  .event-board {
    position: relative;
    margin-bottom: 10%;
    padding: 0;
  }
  .event-board::before {
    content: '';
    display: block;
    position: absolute;
    width: 25%;
    padding-top: 25%;
    left: -10%;
    bottom: -30%;
    background-image: url(../images/coin-2.png);
    background-size: contain;
    background-repeat: no-repeat;

  }
  .event-board::after {
    content: '';
    display: block;
    position: absolute;
    width: 20%;
    padding-top: 20%;
    right: -5%;
    bottom: -20%;
    background-image: url(../images/coin-1.png);
    background-size: contain;
    background-repeat: no-repeat;

  }
  .event-rule,
  .event-precaution {
    position: relative;
    max-width: 1200px;
    width: 100%;
    
    border-top: 5px dotted #e2cdc0;
    font-size: 1.5rem;

  }
  .event-precaution {
    margin-bottom: 200px;
  }
}





.sub-btn-group {
  padding: 0 10%;
}



.border-golden {
  border: 1px solid #feeaa2;
  background-color: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 1rem;
}

@media (min-width: 992px) {
  .border-golden {
    border-radius: 3rem;
  }
  .sub-btn-group {
    padding: 0;
  }
}




#itemBox {
  max-width: 820px;
}

@media (min-width: 992px) {
  #totalDaysWrapper {
    border-right: 3px solid #fff;
  }
}

#totalDays,
#totalCoins {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
  color: #ffd200;
}

#totalDays:after {
  content: '天';
  font-size: 12px;
  padding-left: .25rem;
  color: #fff;
  font-family: 'Century Gothic' , 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}
#totalCoins:after {
  content: '元';
  font-size: 12px;
  padding-left: .25rem;
  color: #fff;
  font-family: 'Century Gothic' , 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}


#infoBox {
  border: 3px solid #fff;
  border-top-width: 0;
  background-color: rgba(0, 0, 0, 0.75);
}



.outer-glow {
  box-shadow: 0 0 15px rgba(0, 255, 249, 0.8);
}





#itemGroup {
  border: 3px solid #fff;
  
}

#itemGroup > .col > div.d-flex {
  transform: translateZ(20px);
}

#isLogin {
  display: none;
}
body.login-true #isLogin {
  display: block;
}

.item-check-in {
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.item-check-in:last-child {
  border-right: 2px solid #fff;
}
.item-check-in.item-checked {
  background: rgba(0, 63, 119, 0.8);
}
.item-check-in.item-not-checked {
  background: rgba(142, 0, 0, 0.75);
}
.item-check-in.item-incoming {
  opacity: 0.75;
}
.item-check-in.item-today {
  opacity: 1;
  box-shadow: 0 0 20px rgba(0, 255, 249, 1);
  z-index: 9;
}
.item-check-in.item-today.item-checked {
  opacity: 1;
  background: rgba(0, 63, 119, 0.8);
  box-shadow: 0 0 0 rgba(0, 255, 249, 1);
}


.text-warning {
  color: #ffe400!important;
}

.modal-backdrop {
  background-color: transparent!important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: all .2s linear;
}
.modal-backdrop.show {
  opacity: 1;
}

@media (min-width: 992px) and (max-width: 1400px) {
  #modalSuccess .modal-dialog {
    max-width: 300px;
  }
}

#modalEventRule .modal-content,
#modalCheckinRecord .modal-content {
  background: rgba(3, 86, 63, 0.95);
  color: #fff;
  border-radius: 0rem;
}
#modalEventRule h5 {
  color: #ffe726;
}
#modalCheckinRecord h3 span {
  color: #ffe726;
  font-weight: bold;
}
#modalCheckinRecord .absent {
  opacity: .75;
  background-color: rgba(0,0,0,0.3);
}



.input-group-validate {
  min-width: 104px;
  flex-basis: 104px;
}
.input-group-validate img {
  width: 100%;
  height: 100%;
}


.bg-dark {
  --bs-bg-opacity: 0.95;
  background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
}




@keyframes animatedBG {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 100000px 50%;
  }
}

body.hooked {
}

#canvasLine {
  position: absolute;
  top: -100vh;
  transition: all 1s ease-in-out;
  
}


#canvasLine.cast {
  top: 0;
  animation: moving 2s ease-in-out infinite alternate;
}

@keyframes moving {
  from {
    transform: translateY(0px);
  } 
  to {
    transform: translateY(-10px);
  }
}

#canvasWaterFlow {
  position: absolute;
  top: 0;
}
#canvasFish {
  position: absolute;
  top: 50%;
  animation: swim 5s linear infinite;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: 50% 50%;
  transition: all 1s ease-in-out;
  left: 50%;
  margin-left: -99px;

}

@media (min-width: 768px) {
  #canvasFish {
    margin-left: -150px;
  }
}

@keyframes swim {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(20px, 0, 0) rotate(-15deg);
  }
  50% {
    transform: translate3d(0, -20px, 0) rotate(0deg);
  }
  75% {
    transform: translate3d(-20px, 0, 0) rotate(15deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}



.text-shadow {
  text-shadow: 0 2px 2px rgba(0, 0, 0, 1);
}

.progress {
  height: 2rem;
}

#turn {
  display: none;
}

.cursor {
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 50%;
  position: absolute;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  pointer-events: none;
  z-index: 9999;
}

.cursoreffect {
  content: "";
  width: 40px;
  height: 40px;
  border: 1px solid #4deeea;
  box-shadow: 0 0 20px #4deeea, 0 0 40px #4deeea, 0 0 80px #4deeea;
  border-radius: 50%;
  position: absolute;
  animation: cursorPulse 1s;
  pointer-events: none;
}

@keyframes cursorPulse {
  0% {-webkit-transform: scale(1.0); opacity: 1;}
  100% {-webkit-transform: scale(3.0); opacity: 0;}
}

.tap-now {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -60px;
  margin-top: -100px;
  background-image: url(../images/tap-now.png);
  background-size: contain;
  pointer-events: none;
  user-select: none;
  opacity: .95;
}



.viva-logo {
  width: 80px;
  margin-top: 0;
  margin-left: 0.5rem;
  z-index: 90;
}

@media (min-width: 768px) {
  .viva-logo {
    width: 150px;
    margin-top: 0rem;
    margin-left: 10rem;
  } 
}




@media (min-width: 1200px) {
  .fs-xl-5 {
    font-size: 1.25rem!important;
  }  
}









.bg-transparent {
  background: transparent!important;
}


.us-none {
  user-select: none;
}



.default-top {
  transition: all 0.2s ease-in;
  background-color: transparent;
}
.default-top.notontop {
  background-color: rgba(244, 88, 88, 0.95);
}
.default-footer {
  background-color: rgba(244, 88, 88, 0.95);
}

footer.p-3.bg-dark-theme.text-center.text-white.position-relative {
  display: none!important;
}