@charset "UTF-8";
html {
  background: #e99795;
  min-height: 100vh;
  color: #fff;
  font: 400 60px/1.5 "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

#main {
  margin: 0 auto;
  height: 3410px;
  max-width: 1920px;
  background: url("../_img/bg.jpg") top no-repeat;
  background-size: cover;
}

/*=====================*/
/* TOP SOCIAL-LINK BAR */
#header {
  position: absolute;
  background: transparent;
  padding: 0 15px;
  height: 108px;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  -webkit-transition: background .7s;
  transition: background .7s;
}

#header .nav {
  max-width: 1000px;
  margin: 0 auto;
  height: 100%;
}

#header ul {
  float: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

#header li {
  display: inline-table;
  height: 100%;
}

#header li > * {
  display: table-cell;
  vertical-align: middle;
}

.logo-link {
  display: table;
  float: left;
  height: 100%;
  width: 33%;
  background: url("../_img/xinstar-logo.png") center no-repeat;
  background-size: contain;
  -webkit-filter: drop-shadow(0 0.2em 0.2em rgba(0, 0, 0, 0.45));
          filter: drop-shadow(0 0.2em 0.2em rgba(0, 0, 0, 0.45));
  font-size: 16px;
}

.logo-link:hover, .logo-link:focus {
  -webkit-filter: drop-shadow(0 0.2em 0.2em rgba(0, 0, 0, 0.65)) brightness(1.1);
          filter: drop-shadow(0 0.2em 0.2em rgba(0, 0, 0, 0.65)) brightness(1.1);
}

.social-links li {
  margin-left: 10px;
}

.social-links a {
  width: 88px;
  height: 88px;
  background-size: contain !important;
  font-size: 16px;
}

.social-links a:hover, .social-links a:focus {
  -webkit-filter: drop-shadow(0 0 0.15em #fff);
          filter: drop-shadow(0 0 0.15em #fff);
}

.fb-link {
  background: url("../_img/icon-fb.png") center no-repeat;
}

.fb-link:hover,
.fb-link:focus {
  background: url("../_img/icon-fb-hover.png") center no-repeat;
}

.yt-link {
  background: url("../_img/icon-yt.png") center no-repeat;
}

.yt-link:hover,
.yt-link:focus {
  background: url("../_img/icon-yt-hover.png") center no-repeat;
}

.line-link {
  background: url("../_img/icon-line.png") center no-repeat;
}

.line-link:hover,
.line-link:focus {
  background: url("../_img/icon-line-hover.png") center no-repeat;
}

.home-link {
  background: url("../_img/icon-home.png") center no-repeat;
}

.home-link:hover,
.home-link:focus {
  background: url("../_img/icon-home-hover.png") center no-repeat;
}

#footer {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 3260px;
  padding: 20px 0 30px 0;
  background: #9c4c38;
  -webkit-box-shadow: 1920px 0 #9c4c38, -1920px 0 #9c4c38, 3840px 0 #9c4c38, -3840px 0 #9c4c38;
          box-shadow: 1920px 0 #9c4c38, -1920px 0 #9c4c38, 3840px 0 #9c4c38, -3840px 0 #9c4c38;
}

.foot {
  width: 723px;
  height: 126px;
  margin: 0 auto;
  background: url("../_img/footer.png") no-repeat center;
  background-size: contain;
}

.foot-wanin {
  float: left;
  display: block;
  width: 49.5%;
  height: 100%;
}

.foot-yoe {
  float: left;
  display: block;
  width: 29%;
  height: 100%;
  margin: 0 5%;
}

/*===================*/
/* MAIN PAGE CONTENT */
.dl-btn-container {
  display: block;
  position: relative;
  top: 755px;
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  height: 100%;
}

.dl-btn, .play-btn {
  display: block;
  position: relative;
  top: 0;
  overflow: hidden;
  width: 443px;
  height: 149px;
}

.dl-btn::after, .play-btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  background-position: center;
  -webkit-animation: fadeInFadeOut .7s infinite alternate;
          animation: fadeInFadeOut .7s infinite alternate;
}

.dl-btn:hover, .dl-btn:focus, .dl-btn:active, .play-btn:hover, .play-btn:focus, .play-btn:active {
  cursor: pointer;
  background-position: bottom;
  -webkit-animation: none;
          animation: none;
}

.dl-btn:hover::after, .dl-btn:focus::after, .dl-btn:active::after, .play-btn:hover::after, .play-btn:focus::after, .play-btn:active::after {
  visibility: hidden;
}

.dl-btn {
  position: relative;
  left: -1.67%;
  background: url("../_img/dl-btn.png") top no-repeat;
  background-size: cover;
}

.play-btn {
  position: absolute;
  right: -1.66%;
  background: url("../_img/play-btn.png") top no-repeat;
  background-size: cover;
}

.rules {
  margin: 0 auto;
  line-height: 1.6;
  width: 920px;
  font-size: 27px;
}

.rules h2 {
  font-size: 1.5em;
  line-height: 1.2;
  margin: .5em 0;
}

.rules ul {
  list-style: none;
  padding-left: 0em;
  margin-bottom: 1.5em;
}

.rules li {
  margin-bottom: .5em;
}

.rules li::before {
  content: "*";
  position: absolute;
  -webkit-transform: translateX(-0.66em);
          transform: translateX(-0.66em);
}

.sr-only {
  position: fixed;
  top: -9in;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/*==================*/
/* FORMS AND MODALS */
html {
  font: 400 60px/1.5 "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif;
}

@media (max-height: 800px) {
  :root {
    font-size: 6vmin;
  }
}

#form-main {
  display: block;
  position: relative;
  top: 1270px;
  color: #9c4c38;
  text-align: center;
  margin: 0 auto;
  max-width: 860px;
  width: 85%;
}

#form-main label {
  position: absolute;
  display: block;
  left: 0;
  font-size: .9em;
  line-height: 1.67;
  border-radius: .5em;
  background: #ffe587;
  color: #6e181c;
  width: 30%;
  z-index: 1;
}

#form-main p {
  font-size: .75em;
  margin: .45em 0 .6em 0;
}

#form-main a {
  color: #e83435;
  text-decoration: underline;
  cursor: pointer;
}

#form-main input {
  display: block;
  width: 100%;
  -webkit-box-shadow: 0 0 0 .1rem #d38653;
          box-shadow: 0 0 0 .1rem #d38653;
  border: none;
  border-radius: .5em;
  padding: 0  0 0 33.333%;
  font: 400 1em "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif;
  height: 1.5em;
}

#form-main input::-webkit-input-placeholder {
  color: #b5b5b5;
  font-weight: 300;
}

#form-main input:-ms-input-placeholder {
  color: #b5b5b5;
  font-weight: 300;
}

#form-main input::-ms-input-placeholder {
  color: #b5b5b5;
  font-weight: 300;
}

#form-main input::placeholder {
  color: #b5b5b5;
  font-weight: 300;
}

#form-main input:before {
  content: "*";
}

#submitPhoneNumber {
  background: url("../_img/submit-btn.png") center no-repeat;
  background-size: contain;
  width: 671px;
  height: 139px;
}

#submitPhoneNumber:active {
  background: url("../_img/submit-btn-press.png") center no-repeat;
  background-size: contain;
}

#personal-info:target {
  display: table-cell;
}

#personal-info .window {
  max-height: none;
  margin: 5vh auto 5vh auto;
}

#personal-info p {
  margin: .25rem 1.35rem .5rem 1.35rem;
}

#verify-phone:target {
  display: table-cell;
}

#verify-phone input {
  display: block;
  -webkit-box-shadow: inset 0 0 0 .1rem #894939;
          box-shadow: inset 0 0 0 .1rem #894939;
  background: #fffbd1;
  border: none;
  border-radius: .5rem;
  text-align: center;
  margin: 0 auto .5rem auto;
  font: 400 1rem "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif;
  width: 82%;
  height: 2.21666rem;
  max-height: 15vh;
}

#verify-phone input::-webkit-input-placeholder {
  color: #b5b5b5;
  font-size: .75rem;
  -webkit-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
}

#verify-phone input:-ms-input-placeholder {
  color: #b5b5b5;
  font-size: .75rem;
  transform: translateY(-0.1rem);
}

#verify-phone input::-ms-input-placeholder {
  color: #b5b5b5;
  font-size: .75rem;
  transform: translateY(-0.1rem);
}

#verify-phone input::placeholder {
  color: #b5b5b5;
  font-size: .75rem;
  -webkit-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
}

#verify-phone input:before {
  content: "*";
}

#select-character:target {
  display: table-cell;
}

#select-character .border {
  max-height: calc(90vh - .5rem);
}

#select-character .player-container {
  -ms-flex-preferred-size: 1;
      flex-basis: 1;
  border: .1rem solid #894939;
  border-radius: .5rem;
  background: #fffbd1;
  width: 82%;
  max-height: calc(90vh - 7rem);
  margin: .35rem auto .5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

#select-character .player-container::-webkit-scrollbar {
  background: #894939;
  width: .78rem;
  border-radius: 1rem;
}

#select-character .player-container::-webkit-scrollbar-thumb {
  background: #600c10;
  border-radius: 1rem;
}

#select-character label {
  display: block;
  text-align: left;
  padding-left: .75rem;
  font-size: 1rem;
  line-height: 1.6;
}

#select-character input[type="radio"] {
  display: none;
}

#select-character input[type="radio"]:checked + label {
  background: #ffe587;
}

#lotto-chance:target {
  display: table-cell;
}

#lotto-chance h2 {
  font-size: 1.4rem;
  margin-bottom: .5rem;
  font-weight: 700;
  white-space: nowrap;
  color: #fffbd1;
}

#lotto-chance #charGo {
  color: #fff100;
}

#draw-lotto:target {
  display: table-cell;
}

#draw-lotto #drawAnim {
  width: 760px;
  height: 840px;
  max-width: 76vmin;
  max-height: 84vmin;
  background: url("../_img/animation.png") left no-repeat;
  background-size: cover;
  margin: 0 auto;
  -webkit-animation: drawAnim 3.33333s steps(1) forwards;
          animation: drawAnim 3.33333s steps(1) forwards;
  cursor: pointer;
}

#prize:target {
  display: table-cell;
}

#prize .window {
  max-height: none;
  margin: 5vh auto 5vh auto;
}

#prize .border {
  padding: .8rem .5rem .8rem 1rem;
}

#prize .prize-container {
  display: inline-block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: calc(90vh - 1.5rem);
  max-height: 98vw;
  width: calc(75vh - 1.5rem);
  max-width: 100%;
  margin: .2rem auto;
}

#prize #prize-img {
  display: inline-block;
  height: 100%;
  width: 7.9rem;
}

#prize #prize-message {
  display: inline-block;
  height: 100%;
  width: 5.2rem;
}

#prize .prize-0 {
  background: url("../_img/prize-iPhone.png") center no-repeat;
  background-size: contain;
}

#prize .prize-1 {
  background: url("../_img/prize-100.png") center no-repeat;
  background-size: contain;
}

#prize .prize-2 {
  background: url("../_img/prize-50.png") center no-repeat;
  background-size: contain;
}

#prize .prize-3 {
  background: url("../_img/prize-20.png") center no-repeat;
  background-size: contain;
}

#prize .prize-4 {
  background: url("../_img/prize-none.png") center no-repeat;
  background-size: contain;
}

#prize .message-0 {
  background: url("../_img/prize-big.png") top no-repeat;
  background-size: contain;
}

#prize .message-1 {
  background: url("../_img/prize-medium.png") top no-repeat;
  background-size: contain;
}

#prize .message-2 {
  background: url("../_img/prize-small.png") top no-repeat;
  background-size: contain;
}

#prize .message-3 {
  background: url("../_img/prize-tiny1.png") top no-repeat;
  background-size: contain;
}

#prize .message-4 {
  background: url("../_img/prize-tiny2.png") top no-repeat;
  background-size: contain;
}

#prize p {
  display: none;
}

#prize p.active {
  display: block;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .15rem 0;
  -webkit-animation: important 0.25s infinite steps(1) alternate;
          animation: important 0.25s infinite steps(1) alternate;
}

@media (min-width: 1050px) {
  #prize .prize-container {
    max-height: 1050px;
  }
}

@media (max-height: 800px) {
  #prize .window:target {
    display: block;
  }
  #prize .window .active {
    display: block;
  }
}

@-webkit-keyframes important {
  0% {
    color: #fff;
  }
  50% {
    color: #fff100;
  }
}

@keyframes important {
  0% {
    color: #fff;
  }
  50% {
    color: #fff100;
  }
}

#error-nocash:target {
  display: table-cell;
}

#error-wrong-number:target {
  display: table-cell;
}

.error-img {
  display: block;
  width: 85%;
  margin: .15rem -.1rem .5rem auto;
}

.error-message {
  color: #fffbd1;
  font: 700 1rem/1.4 "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif;
  position: absolute;
  display: block;
  top: 50%;
  left: 6%;
  text-align: left;
}

button {
  font: 700 1rem/1.5 "Noto Sans TC", "微軟正黑體", Arial, Helvetica, sans-serif;
  display: block;
  margin: 0 auto;
  border: none;
}

button:hover, button:focus {
  cursor: pointer;
  -webkit-filter: brightness(1.2) drop-shadow(0 0.1rem 0.1rem rgba(36, 18, 0, 0.5));
          filter: brightness(1.2) drop-shadow(0 0.1rem 0.1rem rgba(36, 18, 0, 0.5));
}

#agree {
  background: url("../_img/ok-btn.png") center no-repeat;
  background-size: contain;
  width: 82%;
  height: 2.21666rem;
  margin-bottom: .4rem;
}

#send {
  background: url("../_img/send-btn.png") center no-repeat;
  background-size: contain;
  width: 82%;
  height: 2.21666rem;
}

#sendCharacter {
  background: url("../_img/send-btn.png") center no-repeat;
  background-size: contain;
  width: 82%;
  height: 2.21666rem;
  margin-bottom: .65rem;
}

#drawLotto, #switchChar, #continue {
  display: inline-block;
  color: #fff100;
  background: #bd5033;
  border: .1rem solid #fffbd1;
  border-radius: .5rem;
  -webkit-box-shadow: 0 .06rem 0 .12rem #5e070c;
          box-shadow: 0 .06rem 0 .12rem #5e070c;
  width: 38%;
  height: 2.21666rem;
  white-space: nowrap;
  margin-bottom: .85rem;
}

#drawLotto:active, #switchChar:active, #continue:active {
  -webkit-transform: translateY(0.08rem);
          transform: translateY(0.08rem);
  -webkit-box-shadow: 0 -.06rem 0 .12rem #5e070c;
          box-shadow: 0 -.06rem 0 .12rem #5e070c;
}

#drawLotto:disabled {
  display: none;
}

#switchChar {
  background: #9c4c38;
  margin-left: .5rem;
}

#continue {
  border-width: .16rem;
  background: #9c4c38;
  width: 50%;
  height: calc(5vh -1rem);
  margin: .35rem auto .5rem auto;
}

#verify-failed {
  display: block;
  text-align: center;
  visibility: hidden;
  color: #e83435;
  margin: .35rem 1.2rem;
}

#verify-failed.active {
  visibility: visible;
}

.fixed-content {
  position: fixed;
  display: table;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  z-index: 200;
}

.container {
  overflow: auto;
  max-height: 100vh;
}

.container::-webkit-scrollbar {
  width: 4px;
  background: #ccc;
}

.container::-webkit-scrollbar-thumb {
  background: #888;
}

.modal {
  display: none;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.75);
  pointer-events: all;
  overflow-y: auto;
  overflow-x: hidden;
  color: inherit;
  text-decoration: none;
}

@supports ((-webkit-backdrop-filter: blur(0.5vw)) or (backdrop-filter: blur(0.5vw))) {
  .modal {
    -webkit-backdrop-filter: blur(0.5vw);
            backdrop-filter: blur(0.5vw);
  }
}

.modal::-webkit-scrollbar {
  width: 6px;
  background: #894939;
}

.modal::-webkit-scrollbar-thumb {
  background: #fffbd1;
}

.window {
  display: block;
  position: relative;
  font-size: .6em;
  color: #600c10;
  background: #fffbd1;
  border: .16rem solid #894939;
  border-radius: .5rem;
  width: 90%;
  max-width: 15rem;
  height: auto;
  max-height: 90vh;
  margin: 0 auto;
}

.border {
  display: block;
  position: relative;
  height: auto;
  padding: .65rem 0;
  background: url("../_img/window-top.png") top no-repeat, url("../_img/window-bottom.png") bottom no-repeat, url("../_img/window-center.png") center repeat, #facea5;
  background-size: contain;
  border-radius: .5rem;
}

.border h2 {
  font-weight: 900;
  margin: .5rem 1.2rem .25rem 1.2rem;
}

.border p {
  font-weight: 300;
  margin: .25rem 1.2rem;
}

.border.dark {
  background-color: #d38653;
}

.scrollable {
  display: block;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

.scrollable::-webkit-scrollbar {
  background: #894939;
  width: 6px;
  border-radius: 1rem;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #600c10;
  border-radius: 1rem;
}

.modal .close-btn {
  display: block;
  position: absolute;
  right: -0.65rem;
  top: -.6rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: url("../_img/close-btn.svg") center no-repeat;
  background-size: contain;
  z-index: 999;
  -webkit-transition: -webkit-transform .1s;
  transition: -webkit-transform .1s;
  transition: transform .1s;
  transition: transform .1s, -webkit-transform .1s;
}

.close-btn:hover, .close-btn:focus, .close-btn:active {
  -webkit-filter: brightness(1.1) drop-shadow(0 0 0.1rem rgba(0, 0, 0, 0.5));
          filter: brightness(1.1) drop-shadow(0 0 0.1rem rgba(0, 0, 0, 0.5));
}

.active {
  display: table-cell;
}

/*=====================*/
/* KEYFRAMES AND MEDIA */
@-webkit-keyframes fadeInFadeOut {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInFadeOut {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes flash {
  0% {
    background-position: top;
  }
  50% {
    background-position: center;
  }
}

@keyframes flash {
  0% {
    background-position: top;
  }
  50% {
    background-position: center;
  }
}

@-webkit-keyframes drawAnim {
  0% {
    background-position: left;
    pointer-events: none;
  }
  12% {
    background-position: 20%;
  }
  15% {
    background-position: 40%;
  }
  18% {
    background-position: 60%;
  }
  20% {
    background-position: 20%;
  }
  22% {
    background-position: 40%;
  }
  24% {
    background-position: 60%;
  }
  26% {
    background-position: 20%;
  }
  28% {
    background-position: 40%;
  }
  30% {
    background-position: 60%;
  }
  32% {
    background-position: 20%;
  }
  34% {
    background-position: 40%;
  }
  36% {
    background-position: 60%;
  }
  38% {
    background-position: 20%;
  }
  40% {
    background-position: 40%;
  }
  43% {
    background-position: 60%;
  }
  46% {
    background-position: 80%;
  }
  60% {
    background-position: right;
    pointer-events: all;
  }
  to {
    background-position: right;
  }
}

@keyframes drawAnim {
  0% {
    background-position: left;
    pointer-events: none;
  }
  12% {
    background-position: 20%;
  }
  15% {
    background-position: 40%;
  }
  18% {
    background-position: 60%;
  }
  20% {
    background-position: 20%;
  }
  22% {
    background-position: 40%;
  }
  24% {
    background-position: 60%;
  }
  26% {
    background-position: 20%;
  }
  28% {
    background-position: 40%;
  }
  30% {
    background-position: 60%;
  }
  32% {
    background-position: 20%;
  }
  34% {
    background-position: 40%;
  }
  36% {
    background-position: 60%;
  }
  38% {
    background-position: 20%;
  }
  40% {
    background-position: 40%;
  }
  43% {
    background-position: 60%;
  }
  46% {
    background-position: 80%;
  }
  60% {
    background-position: right;
    pointer-events: all;
  }
  to {
    background-position: right;
  }
}

@media (max-width: 1000px) {
  html {
    font-size: 6vw;
  }
  #main {
    height: 341vw;
  }
  #header {
    height: 10.8vw;
  }
  .social-links li {
    margin-left: .3vw;
  }
  .social-links a {
    width: 8.6vw;
    height: 8.6vw;
  }
  .dl-btn-container {
    top: 75.5vw;
  }
  .dl-btn, .play-btn {
    width: 44.3vw;
    height: 14.9vw;
  }
  .rules {
    width: 92vw;
    font-size: 2.7vw;
  }
  .form {
    font-size: 6vw;
  }
  #form-main {
    top: 127vw;
  }
  #submitPhoneNumber {
    width: 67.1vw;
    height: 13.9vw;
  }
  #drawAnim {
    width: 76vw;
    height: 84vw;
  }
  #footer {
    top: 326vw;
    padding: 2vw 0 3vw 0;
  }
  .foot {
    width: 72.3vw;
    height: 12.6vw;
  }
}

@media (max-width: 499px) {
  .rules {
    font-size: 13.5px;
    width: 90vw;
  }
}

/* header-text 獲獎跑馬燈 */
/* ===================================
  set
==================================== */
#header-text {
  width: 100%;
  height: auto;
  display: block;
  position: fixed;
  left: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  z-index: 150;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  font-weight: bold;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  font-size: 48px;
}

@supports ((-webkit-backdrop-filter: blur(0.3em)) or (backdrop-filter: blur(0.3em))) {
  #header-text {
    background-color: rgba(36, 36, 36, 0.85);
    -webkit-backdrop-filter: blur(0.5em);
            backdrop-filter: blur(0.5em);
  }
}

#header-text .ah-headline {
  font-size: 1em;
  line-height: 1.2;
  font-family: "微軟正黑體", "Noto Sans TC", Heiti TC, Microsoft JhengHei, Verdana, Arial;
  display: block;
  overflow: hidden;
  position: relative;
  margin: .25em 0;
}

#header-text .ah-headline.slide .ah-words-wrapper {
  vertical-align: middle;
}

#header-text .ah-words-wrapper {
  width: 100% !important;
  text-align: center !important;
}

#header-text .ah-words-wrapper b {
  display: block;
  width: 100%;
}

#header-text.active {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

#header-text .gift {
  padding: 0 .25em !important;
}

#header-text .phone-num, #header-text .gift {
  color: #fddc00;
  padding: 0 .25em !important;
}

@media (max-width: 1000px) {
  #header-text {
    font-size: 4.8vw;
    top: 0;
  }
}

/* ===================================
  default
==================================== */
.ah-headline.type .ah-words-wrapper.selected::after, .ah-headline.type b {
  visibility: hidden;
}

.ah-headline.clip span, .ah-headline.loading-bar span, .ah-headline.slide span {
  padding: .2em 0;
  display: inline-block;
}

.ah-headline.clip .ah-words-wrapper, .ah-headline.loading-bar .ah-words-wrapper, .ah-headline.slide .ah-words-wrapper, .ah-headline.type .ah-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}

.ah-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}

.ah-words-wrapper b {
  display: inline-block;
  position: absolute;
  /*white-space: nowrap;*/
  left: 0;
  top: 0;
  text-align: center;
}

.ah-words-wrapper b.is-visible {
  position: relative;
}

.no-js .ah-words-wrapper b {
  opacity: 0;
}

.no-js .ah-words-wrapper b.is-visible {
  opacity: 1;
}

/*
.ah-headline.rotate-1 .ah-words-wrapper {
    -webkit-perspective: 300px;
    perspective: 300px
}
.ah-headline.rotate-1 b {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}
.ah-headline.rotate-1 b.is-visible {
    opacity: 1;
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-animation: ah-rotate-1-in 1.2s;
    animation: ah-rotate-1-in 1.2s
}
.ah-headline.rotate-1 b.is-hidden {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    -webkit-animation: ah-rotate-1-out 1.2s;
    animation: ah-rotate-1-out 1.2s
}*/
@-webkit-keyframes ah-rotate-1-in {
  0% {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    opacity: 0;
  }
  35% {
    -webkit-transform: rotateX(120deg);
    transform: rotateX(120deg);
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
    opacity: 1;
  }
}

@keyframes ah-rotate-1-in {
  0% {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    opacity: 0;
  }
  35% {
    -webkit-transform: rotateX(120deg);
    transform: rotateX(120deg);
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
    opacity: 1;
  }
}

@-webkit-keyframes ah-rotate-1-out {
  0% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
  35% {
    -webkit-transform: rotateX(-40deg);
    transform: rotateX(-40deg);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    opacity: 0;
  }
}

@keyframes ah-rotate-1-out {
  0% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
  35% {
    -webkit-transform: rotateX(-40deg);
    transform: rotateX(-40deg);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    opacity: 0;
  }
}

.ah-headline.type .ah-words-wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 90%;
  width: 1px;
  background-color: #363636;
}

.ah-headline.type .ah-words-wrapper.waiting::after {
  -webkit-animation: ah-pulse 1s infinite;
  animation: ah-pulse 1s infinite;
}

.ah-headline.type .ah-words-wrapper.selected {
  background-color: #f0f0f0;
}

.ah-headline.type .ah-words-wrapper.selected b {
  color: #363636;
}

.ah-headline.type b.is-visible {
  visibility: visible;
}

.ah-headline.type i {
  position: absolute;
  visibility: hidden;
}

.ah-headline.type i.in {
  position: relative;
  visibility: visible;
}

@-webkit-keyframes ah-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}

@keyframes ah-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}

.ah-headline.rotate-2 .ah-words-wrapper {
  -webkit-perspective: 300px;
  perspective: 300px;
}

.ah-headline.rotate-2 em, .ah-headline.rotate-2 i {
  display: inline-block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ah-headline.rotate-2 b {
  opacity: 0;
}

.ah-headline.rotate-2 i {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-20px) rotateX(90deg);
  transform: translateZ(-20px) rotateX(90deg);
  opacity: 0;
}

.is-visible .ah-headline.rotate-2 i {
  opacity: 1;
}

.ah-headline.rotate-2 i.in {
  -webkit-animation: ah-rotate-2-in .4s forwards;
  animation: ah-rotate-2-in .4s forwards;
}

.ah-headline.rotate-2 i.out {
  -webkit-animation: ah-rotate-2-out .4s forwards;
  animation: ah-rotate-2-out .4s forwards;
}

.ah-headline.rotate-2 em {
  -webkit-transform: translateZ(20px);
  transform: translateZ(20px);
}

.no-csstransitions .ah-headline.rotate-2 i {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  opacity: 0;
}

.no-csstransitions .ah-headline.rotate-2 i em {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.no-csstransitions .ah-headline.rotate-2 .is-visible i {
  opacity: 1;
}

@-webkit-keyframes ah-rotate-2-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(90deg);
    transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(-10deg);
    transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0);
    transform: translateZ(-20px) rotateX(0);
  }
}

@keyframes ah-rotate-2-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(90deg);
    transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(-10deg);
    transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0);
    transform: translateZ(-20px) rotateX(0);
  }
}

@-webkit-keyframes ah-rotate-2-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0);
    transform: translateZ(-20px) rotateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-100deg);
    transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-90deg);
    transform: translateZ(-20px) rotateX(-90deg);
  }
}

@keyframes ah-rotate-2-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0);
    transform: translateZ(-20px) rotateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-100deg);
    transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-90deg);
    transform: translateZ(-20px) rotateX(-90deg);
  }
}

.ah-headline.loading-bar .ah-words-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #356efd;
  z-index: 2;
  -webkit-transition: width .3s -.1s;
  transition: width .3s -.1s;
}

.ah-headline.loading-bar .ah-words-wrapper.is-loading::after {
  width: 100%;
  -webkit-transition: width 3s;
  transition: width 3s;
}

.ah-headline.loading-bar b {
  top: .2em;
  opacity: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.ah-headline.loading-bar b.is-visible {
  opacity: 1;
  top: 0;
}

.ah-headline.slide b {
  width: 100%;
  opacity: 0;
  top: .2em;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.ah-headline.slide b.is-visible {
  top: 0;
  opacity: 1;
  -webkit-animation: slide-in .6s;
  animation: slide-in .6s;
}

.ah-headline.slide b.is-hidden {
  -webkit-animation: slide-out .6s;
  animation: slide-out .6s;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
    transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
    transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.ah-headline.clip .ah-words-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #363636;
}

.ah-headline.clip b {
  opacity: 0;
}

.ah-headline.clip b.is-visible {
  opacity: 1;
}

.ah-headline.zoom .ah-words-wrapper {
  -webkit-perspective: 300px;
  perspective: 300px;
}

.ah-headline.zoom b {
  opacity: 0;
}

.ah-headline.zoom b.is-visible {
  opacity: 1;
  -webkit-animation: zoom-in .8s;
  animation: zoom-in .8s;
}

.ah-headline.zoom b.is-hidden {
  -webkit-animation: zoom-out .8s;
  animation: zoom-out .8s;
}

@-webkit-keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@-webkit-keyframes zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
    transform: translateZ(-100px);
  }
}

@keyframes zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
    transform: translateZ(-100px);
  }
}

.ah-headline.rotate-3 .ah-words-wrapper {
  -webkit-perspective: 300px;
  perspective: 300px;
}

.ah-headline.rotate-3 b {
  opacity: 0;
}

.ah-headline.rotate-3 i {
  display: inline-block;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.is-visible .ah-headline.rotate-3 i {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}

.ah-headline.rotate-3 i.in {
  -webkit-animation: ah-rotate-3-in .6s forwards;
  animation: ah-rotate-3-in .6s forwards;
}

.ah-headline.rotate-3 i.out {
  -webkit-animation: ah-rotate-3-out .6s forwards;
  animation: ah-rotate-3-out .6s forwards;
}

.no-csstransitions .ah-headline.rotate-3 i {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  opacity: 0;
}

.no-csstransitions .ah-headline.rotate-3 .is-visible i {
  opacity: 1;
}

@-webkit-keyframes ah-rotate-3-in {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}

@keyframes ah-rotate-3-in {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}

@-webkit-keyframes ah-rotate-3-out {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
}

@keyframes ah-rotate-3-out {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
}

.ah-headline.scale b {
  opacity: 0;
}

.ah-headline.scale i {
  display: inline-block;
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.is-visible .ah-headline.scale i {
  opacity: 1;
}

.ah-headline.scale i.in {
  -webkit-animation: scale-up .6s forwards;
  animation: scale-up .6s forwards;
}

.ah-headline.scale i.out {
  -webkit-animation: scale-down .6s forwards;
  animation: scale-down .6s forwards;
}

.no-csstransitions .ah-headline.scale i {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0;
}

.no-csstransitions .ah-headline.scale .is-visible i {
  opacity: 1;
}

@-webkit-keyframes scale-up {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-up {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes scale-down {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes scale-down {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
}

.ah-headline.push b {
  opacity: 0;
}

.ah-headline.push b.is-visible {
  opacity: 1;
  -webkit-animation: push-in .6s;
  animation: push-in .6s;
}

.ah-headline.push b.is-hidden {
  -webkit-animation: push-out .6s;
  animation: push-out .6s;
}

@-webkit-keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(10%);
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(10%);
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateX(110%);
    transform: translateX(110%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateX(110%);
    transform: translateX(110%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
/*# sourceMappingURL=main.css.map */