@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC'); */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700&display=swap');
body {
  height: 100%;
  -webkit-text-size-adjust: none;
  font-size: 14px;
  /*background: url('../images/bg.png') top left;*/
  /*background-repeat:no-repeat;*/
  /*background-repeat: repeat-y;*/
  /*background-repeat: repeat-x;*/
  /*background-size: 100% auto;*/
  background-color: #b4292c;
  /*background-attachment: fixed;*/
  font-family: 'Noto Sans TC', Arial, 'Apple LiGothic Black', '微軟正黑體',
    sans-serif;

  /*overflow:scroll;*/
}
html {
  touch-action: manipulation;
}

img {
  pointer-events: none;
}

input {
  font-size: 14px;
  border: 0px;
  border-radius: 0px;
}

label,
table {
  font-family: 'Noto Sans TC', Arial, 'Apple LiGothic Black', '微軟正黑體',
    sans-serif;
}

.outside-line {
  display: block;
  width: 100%;
  height: 100%;

  position: relative;
  top: 0%;
  left: 0%;
  /*transform: translateX(-50%);*/

  min-height: 100%;
  /*margin-bottom: -78px;*/

  /*border: 1px solid #dd00cc;*/
  /*background: url('../images/bbg.jpg') top left;
    background-repeat: repeat-y;*/
  /*padding-top: 10%;*/
}

.inside-line {
  display: block;
  width: 100%;
  height: 100%;

  position: relative;
  top: 0;
  left: 0;
  /*border:1px solid #0ff00f;*/

  /* padding-top: 2%; */
  /*background-color: rgba(0,0,0,.2);*/
}

.container {
  display: block;
  width: 100%;
  height: 100%;

  position: relative;
  top: 0;
  left: 0;
  /*transform: translateX(-50%);*/

  /*border: 1px solid #fff;*/
}

/* .header {
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;

  padding-top: 5%;

}

.logo {
  display: inline-block;
  width: 30%;
  width: 20%;

  position: absolute;
  top: 0px;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);



  z-index: 500;
  pointer-events: auto;
} */

/* .btn-volume,
.btn-menu,
.btn-on,
.btn-off {
  display: inline-block;
  width: 8%;

  position: absolute;
  top: 18px;
  right: 3%;

  z-index: 11;

  color: #fff;
  margin-right: 0px;

  cursor: pointer;
  pointer-events: auto;
}

.btn-on {
  display: none;
}
.btn-off {
  display: none;
} */

/*/////////////////////////////////////////////*/
/*/////////////////// index ///////////////////*/
/*/////////////////////////////////////////////*/

.index-top,
.index-middle,
.index-bottom {
  display: block;
  width: 100%;

  position: relative;
  top: 0;
  left: 0;
}

.middle-bg {
  display: block;
  width: 100%;
  position: absolute;
  position: relative;
  top: 0;
  left: 0;
}

.btn-login {
  display: block;
  width: 50%;
  position: absolute;
  top: 45%;
  left: 25%;

  cursor: pointer;
  pointer-events: auto;
}

.btn-close-menu,
.btn-menu {
  display: block;
  width: 10%;

  position: absolute;
  top: 0;
  left: 88%;

  margin-top: 2%;

  cursor: pointer;
  pointer-events: auto;
}

.index-canvas {
  display: block;
  width: 100%;
  position: absolute;
  top: 88vw;
  left: 0;
}

/*/////////////////////////////////////////////*/
/*/////////////////// MENU ///////////////////*/
/*/////////////////////////////////////////////*/

.menu-box {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;

  background-color: #b3292c;

  display: none;
}
.menu-logo {
  display: block;
  width: 40%;
  position: relative;
  top: 0;
  left: 0;

  margin-top: 5%;
  margin-left: 5%;
}

.menu-img {
  display: block;
  width: 100%;
  position: relative;
  top: 10vw;
  left: 0;

  margin-bottom: 5%;

  cursor: pointer;
  pointer-events: auto;
}

.btn-closemenu {
  z-index: 21;
}

.menu-box > .m1 {
  margin-top: 15%;
}

/*自定義radio 圖片做法*/
.radioLebel {
  height: 18px;
  width: 18px;
  display: inline-block;
  background-image: url('../images/radio.png');
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-size: cover;
}

input[type='radio']:checked + .radioLebel {
  background-image: url('../images/radioed.png');
}

/*自定義checkbox 圖片做法*/
.chks {
  display: none;
}

.chks[type='checkbox'] + span {
  display: inline-block;
  /* width: 16px;
  height: 16px; */
  background: url('../images/btn_chk.png') no-repeat;
  background-size: cover;
  width: 4vw;
  height: 4vw;
}

.chks[type='checkbox']:checked + span {
  display: inline-block;
  /* width: 16px;
  height: 16px; */
  background: url('../images/btn_chked.png') no-repeat;
  background-size: cover;
  width: 4vw;
  height: 4vw;
}

.chk-left2 {
  /* margin-left: 3%; */
}
/*.txt-ag{ 
  display: inline-block;

  font-size: 2vw; 
  border: 1px solid;
}
*/

::placeholder {
  /* CSS 3 標準 */
  color: #565656;
  font-weight: 300;
}

::-webkit-input-placeholder {
  /* Chrome, Safari */
  color: #565656;
  font-weight: 300;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #565656;
  font-weight: 300;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #565656;
  opacity: 1;
  font-weight: 300;
}

/*/////////////////////////////////////////////*/
/*//////////////////   serial  ////////////////*/
/*/////////////////////////////////////////////*/

.form-box,
.game-box,
.serial-box {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.serial-bottom,
.serial-top {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.serial-middle {
  display: block;
  /* width: 75%; */
  width: 100%;
  position: relative;
  top: 0;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  left: 0;
  background-color: #fff;
}

.serial-middle img {
  display: block;
  width: 75%;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.serial-middle input {
  width: 65%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  text-align: center;

  /* background-color: aqua; */
  height: 6vw;
  font-size: 4vw;
  margin-top: 10vw;
}

.serial-bottom-bg {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.serial-agree-box {
  display: block;
  width: 80%;
  position: absolute;
  top: 0;
  left: 16%;
  /* transform: translateX(-50%); */
  /* border: 1px solid #fff000; */
  margin-top: 22%;
}

.serial-agree-box .row {
  display: flex;
  align-items: center;
  /* align-items: flex-start; */
}

.serial-agree-box .col {
  /* font-size: 3vw;
  letter-spacing: -0.2vw; */
  font-size: 2.8vw;
  letter-spacing: -0.3vw;
}

.serial-agree-box .col:first-child {
  width: 10%;
  width: 4.5vw;
}
.serial-agree-box .col:last-child {
  width: 90%;
}

.serial-agree-box .col .txt-term {
  text-decoration: underline;
  cursor: pointer;
  text-decoration: underline;
  cursor: pointer;
  margin-left: -0.5vw;
  margin-right: -0.5vw;
}

.serial-btns {
  display: block;
  width: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* border: 1px solid #000; */

  margin-top: 25%;
}

.btn-start {
  display: block;
  width: 70%;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /* margin-top: 8%; */
  margin-top: 13%;

  pointer-events: auto;
  cursor: pointer;
}

/*/////////////////////////////////////////////*/
/*///////////////////   game  /////////////////*/
/*/////////////////////////////////////////////*/

.game-bg {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.game-main {
  display: block;
  width: 85%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /* border: 1px solid #ff00ff; */

  margin-top: 18%;
}

.game-top,
.game-line {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.animate-box,
.result-box {
  box-sizing: border-box;
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;

  pointer-events: none;
  /* background-color: #5648a8; */
}

/* .animate-box > *,
.result-box > * {
  pointer-events: none;
} */

.result-box div {
  display: inline-block;
  width: 29%;
  /* height: 80px; */
  position: relative;
  top: 0;
  left: 0;
  /* background-color: #565656; */
  /* color: #000; */
  text-align: center;
  /* line-height: 80px; */
  margin-right: 3%;
}

.result-box div:first-child {
  margin-left: 2%;
}
.result-box div:nth-child(3) {
  margin-right: 0;
}

.result-box div img {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;

  margin-top: 5px;

  display: none;
}

.result-box div img:first-child {
  /* .result-box div img:last-child { */
  display: block;
}

.animate-box {
  display: flex;
  /* background-color: rgb(12, 88, 84); */
  padding-top: 8px;
  padding-left: 2%;
  padding-right: 2%;
  justify-content: space-between;
}

.animate-box ul {
  /* width: 29%; */
  width: 25.625vw;
  position: relative;
}

.animate-box ul li {
  display: block;
  width: 98%;
  /* height: 30px; */
  position: relative;
  top: 0;
  left: 1%;
  /* background-color: #fff; */
  text-align: center;
  line-height: 30px;
  margin-bottom: 8px;
}

.animate-box ul li img {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.game-bottom {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  /* border: 1px solid; */

  margin-top: -5px;
}

.game-bottom-bg {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.btn-play,
.btn-playing {
  display: block;
  width: 35%;
  position: absolute;
  top: 0;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  left: 32.5%;

  cursor: pointer;
  pointer-events: auto;
  margin-top: 5%;
}

.btn-playing {
  display: none;
}

.prize-popup {
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;

  /* border: 1px solid rgb(74, 105, 74); */
  z-index: 990;
}

.light {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.prize-main {
  display: block;
  width: 70%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* border: 1px solid #f00ff0; */

  margin-top: 37%;
}

.prize-main div {
  background-color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-bottom: 25px;
}

.prizes,
.prize-top {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.prizes {
  display: none;
}
#prize0 {
  display: none;
}

.btn-form,
.btn-replay {
  display: block;
  width: 60%;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  cursor: pointer;
  pointer-events: auto;
}

.btn-replay {
  /* display: none; */
}
.btn-form {
  display: none;
}

.prize-popup {
  display: none;
}

/*/////////////////////////////////////////////*/
/*/////////////////// info /////////////////*/
/*/////////////////////////////////////////////*/

.info-popup {
  display: block;
  width: 80%;
  /* border: 1px solid; */
  position: absolute;
  left: 10%;
  top: 0;
  margin-top: 20%;
  z-index: 991;

  display: none;
}

#btnCloseInfo {
  display: block;
  width: 9vw;
  position: absolute;
  top: -4%;
  left: 95%;
  z-index: 99;

  pointer-events: auto;
  cursor: pointer;
}

.info-container {
  display: block;
  width: 100%;
  position: relative;
  /* border: 1px solid #ff00ff; */
  overflow: hidden;

  pointer-events: none;
}

.info-container .infoH {
  display: block;
  width: 100%;
  position: relative;
  visibility: hidden;
}

.info-container .info-imgs {
  display: block;
  width: 100%;
  position: absolute;
  top: 0;

  display: none;
}

#infoImg1 {
  display: block;
}

/*/////////////////////////////////////////////*/
/*/////////////////// form /////////////////*/
/*/////////////////////////////////////////////*/

.game-box,
.serial-box {
  display: none;
}
.serial-box {
}
.form-box {
  display: none;
}

.form-bg {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.form-main {
  display: block;
  width: 80%;
  position: absolute;
  top: 0;
  left: 10%;
  /* border: 1px slateblue solid; */

  margin-top: 40%;
}

.agree-box,
.form-table {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  /* border: 1px solid #b3292c; */
}

.form-table .row {
  display: flex;
  align-items: center;
  /* margin-bottom: 10px; */
  margin-bottom: 3vw;
  /* border: 1px solid #5482de; */
}

.form-table .row .col {
  display: block;
  /* border: rgb(31, 184, 51) 1px solid; */
}

.form-table .row .col:first-child {
  width: 20%;
}
.form-table .row .col:last-child {
  width: 80%;
}

.form-table .row .col:first-child > img {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;

  /* border: #000 1px solid; */
}

.form-table .row .col > input {
  display: inline-block;
  width: 90%;
  height: 40px;
  position: relative;
  top: 0;
  left: 0;
  border: 1px solid #ce2d2a;
  border-radius: 5px;

  height: 10vw;
  font-size: 4vw;
  border-radius: 1vw;
  width: 59.5vw;
}

#city,
#dist {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

  background-image: url('../images/select_arror.jpg');
  background-repeat: no-repeat;
  background-position: right;

  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;

  color: #565656;
}

.inp_dist,
#city,
#dist {
  display: inline-block;
  /* width: 48%; */
  position: relative;
  /* top: 0;
  left: 0; */

  padding-left: 1%;
  border: 1px solid #ce2d2a;
  border-radius: 5px;

  background-color: #fff;

  /* height: 40px; */

  height: 10vw;
  font-size: 4vw;
  border-radius: 1vw;
  width: 31vw;
}

#city {
  /* margin-right: 1%; */
  /* color: #666; */
  margin-right: 1vw;
}

.inp_dist {
  display: none;
}
.txt-address-prompt {
  display: block;
  width: 60%;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /* margin-top: -5px;
  margin-bottom: 10px; */

  margin-top: -2vw;
  margin-bottom: 3vw;
}
.agree-box {
  /* border: 1px solid #ff000f; */
  left: 13%;
  width: 85%;
  margin-bottom: 15px;
  margin-bottom: 4vw;
}

.agree-box .row {
  /* display: flex; */
  display: flex;
  align-items: flex-start;
}

.agree-box .row .col {
  margin-right: 1vw;
  font-size: 3vw;
  letter-spacing: 0.2vw;
  line-height: 3vw;
}

/* .btn-submit {
  display: block;
  width: 60%;
  height: 60px;
  position: relative;
  top: 0;
  left: 20%;
  margin-top: 10%;
 
  color: #fff;
  text-align: center;
  line-height: 60px;

  cursor: pointer;
  pointer-events: auto;
  
} */

.btn-form-term,
.btn-submit {
  display: inline-block;
  width: 48%;
  position: relative;
  top: 0;
  left: 0;

  pointer-events: auto;
  cursor: pointer;
}

.btn-form-term {
  /* margin-right: 5px; */
}
.btns-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

.submit-popup {
  display: block;
  width: 70%;
  width: 70vw;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  z-index: 991;
  margin-top: 25%;

  display: none;
}
.submit-popup-main {
  background-color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-bottom: 15px;
}
.submit-popup-main img {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.submit-popup-main .btn-back {
  display: block;
  width: 60%;
  position: relative;
  top: 0;
  left: 20%;

  pointer-events: auto;
  cursor: pointer;
}

.pop-submit-ul {
  display: block;
  width: 62vw;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  margin-bottom: 4vw;
}

.pop-submit-ul li {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;

  font-size: 3.5vw;
  /* font-weight: bold; */
  letter-spacing: 0.3vw;

  margin-bottom: 1.5vw;
}

.pop-submit-ul li a {
  text-decoration: none;
  color: #ce2d2a;
}

.pop-submit-ul li span {
  text-decoration: none;
  color: #ce2d2a;
}

/*/////////////////////////////////////////////*/
/*///////////////////  prize  /////////////////*/
/*/////////////////////////////////////////////*/

.prize-box {
  display: block;
  width: 100%;
  /* max-width: 640px; */
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  /* display: none; */
}

.prize-box img {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
/* 
.menu-container {
  display: fixed;
  width: 100%;
  max-width: 640px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.menu-container .menu-box {
  display: block;
  position: relative;
} */

/*/////////////////////////////////////////////*/
/*/////////////////// pop up  /////////////////*/
/*/////////////////////////////////////////////*/

.popup {
  display: block;
  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;

  background-color: rgba(0, 0, 0, 0.6);
  z-index: 900;
  pointer-events: none;
  display: none;
}

#loadingGif {
  display: block;
  width: 20%;
  position: fixed;
  top: 0;
  left: 40%;
  margin-top: 60vw;
  pointer-events: none;
  z-index: 901;

  display: none;
}

/* 
.yt-box {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.hide {
  display: none;
}


/* pad */
/*@media (min-width: 300px) and (max-width: 640px) */
/*@media screen and (min-width: 640px) */
/* @media screen and (max-width: 640px)  {
} */

.preloader {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 1px;
  height: 0px;
  overflow: hidden;
}

/* .loading {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: white url(../images/loading-1.gif) center center no-repeat;
} */
/* .yt-box {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}
.yt-box iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
} */

.allCover {
  display: block;
  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;

  background-color: #b4292c;

  z-index: 999;
}

.allCover span {
  color: #fff;
  font-size: 20pt;

  display: block;
  width: 100%;
  height: 100%;

  position: absolute;
  top: 2%;
  left: 5%;

  /*text-align: center;*/
}

.allCover img {
  display: block;
  width: 100%;

  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
}

.scale-in-center {
  -webkit-animation: scale-in-center 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    infinite alternate-reverse both;
  animation: scale-in-center 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
    alternate-reverse both;
}

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    /*transform: rotate(-10deg);
            transform: rotate(-10deg);*/
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /*transform: rotate(0);
            transform: rotate(0);*/
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    /*transform: rotate(-10deg);
            transform: rotate(-10deg);*/
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /*transform: rotate(0);
            transform: rotate(0);*/
    opacity: 1;
  }
}

.rotate-in-center {
  -webkit-animation: rotate-in-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    infinite alternate-reverse;
  animation: rotate-in-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
    alternate-reverse;
}

@-webkit-keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    opacity: 1;
  }
}
@keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    opacity: 1;
  }
}

.slide-in-tr {
  -webkit-animation: slide-in-tr 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    infinite alternate-reverse both;
  animation: slide-in-tr 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
    alternate-reverse both;
}

/**
 * ----------------------------------------
 * animation slide-in-tr
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-tr {
  0% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
    transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-tr {
  0% {
    -webkit-transform: translateY(-1000px) translateX(1000px);
    transform: translateY(-1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation scale-up-bottom
 * ----------------------------------------
 */

.scale-up-bottom {
  -webkit-animation: scale-up-bottom 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
    infinite alternate-reverse both;
  /* animation: scale-up-bottom 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) infinite */
  animation: scale-up-bottom 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
    alternate-reverse both;
}

@-webkit-keyframes scale-up-bottom {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
}
@keyframes scale-up-bottom {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
}