body {
  width: 100%;
  height: 100%; }

.mask, body .wrapper, body .wrapper .page .gift-content .banner .mask, body .wrapper .page .gift-content .btn-wrapper .btn .sanga, body .wrapper .page#main {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0; }

body .wrapper .page .content, body .wrapper .page .gift-content .banner h3 {
  top: 50%;
  left: 50%;
  width: 100%;
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center; }

@keyframes roll {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg); } }

@-webkit-keyframes roll {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg); } }

#tubular-container {
  opacity: 0; }

.clearfix {
  clear: both; }

.img {
  display: block;
  width: 100%;
  height: auto; }

.mask {
  position: fixed;
  text-align: center;
  background: rgba(114, 179, 195, 0.98);
  z-index: 1000;
  font-size: 8vw;
  margin: 0;
  color: #FFF; }
  .mask::after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle; }
  .mask h1 {
    display: inline-block;
    vertical-align: middle; }

body {
  font-family: fantasy,Microsoft JhengHei;
  background-image: url("../images/bg.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
  padding: 0; }
  body .wrapper .page {
    position: relative;
    background: rgba(87, 86, 107, 0.8);
    z-index: 100;
    height: 100vh; }
    body .wrapper .page .gift-content {
      background: rgba(255, 255, 255, 0.4);
      width: 80%;
      margin: 0 auto;
      max-width: 1200px;
      border-radius: 10px;
      border: 1px solid #fff; }
      body .wrapper .page .gift-content .banner {
        position: relative; }
        body .wrapper .page .gift-content .banner .img {
          border-radius: 10px 10px 0 0; }
        body .wrapper .page .gift-content .banner .mask {
          border-radius: 10px 10px 0 0;
          box-sizing: border-box;
          background: rgba(255, 255, 255, 0.4); }
        body .wrapper .page .gift-content .banner h3 {
          color: #FFF;
          font-size: 4vw;
          margin: 0; }
      body .wrapper .page .gift-content .btn-wrapper {
        text-align: center; }
        body .wrapper .page .gift-content .btn-wrapper .btn {
          background: transparent;
          border: 1px solid #FFF;
          color: #FFF;
          font-weight: bold;
          cursor: pointer;
          font-size: 2vw;
          transition: all 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
          -webkit-transition: all 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
          padding: 20px 25px;
          width: 30%;
          margin: 5vw;
          overflow: hidden;
          position: relative; }
          body .wrapper .page .gift-content .btn-wrapper .btn span {
            position: relative;
            z-index: 10; }
          body .wrapper .page .gift-content .btn-wrapper .btn .sanga {
            z-index: -1;
            height: 1000px;
            width: 1000px;
            border-radius: 45%;
            opacity: 0.6;
            top: 60%;
            left: -300px;
            transition: all 0.5s ease-in;
            -webkit-transition: all 0.5s ease-in;
            -webkit-animation: roll 3s linear infinite;
            animation: roll 3s linear infinite; }
    body .wrapper .page#main {
      background: rgba(255, 229, 182, 0.26);
      text-align: center; }
      body .wrapper .page#main .main-content h1 {
        font-size: 0vw;
        color: transparent;
        margin: 0;
        transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
        -webkit-transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
        body .wrapper .page#main .main-content h1.active {
          font-size: 12vw;
          color: #FFF; }
      body .wrapper .page#main .main-content #next_btn {
        font-family: fantasy,Microsoft JhengHei;
        background: transparent;
        border: 1px solid #72b3c3;
        color: #72b3c3;
        font-weight: bold;
        cursor: pointer;
        font-size: 2vw;
        transition: all 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
        -webkit-transition: all 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
        transform: translate(0, -50px);
        opacity: 0;
        margin-top: 3vh;
        padding: 10px 30px;
        border-radius: 30px; }
        body .wrapper .page#main .main-content #next_btn.active {
          opacity: 1;
          transform: translate(0, 0); }
        body .wrapper .page#main .main-content #next_btn:hover {
          color: #FFF;
          background-color: #72b3c3; }
  body .wrapper .msg {
    background: rgba(255, 255, 255, 0.95);
    font-family: Microsoft JhengHei;
    min-height: 0;
    height: auto;
    border-bottom: 1px dotted #72b3c3; }
    body .wrapper .msg .msg-content {
      text-align: left;
      width: 80%;
      margin: 0 auto;
      max-width: 600px;
      padding: 20px 0; }
      body .wrapper .msg .msg-content p {
        margin: 20px auto;
        padding-left: 5px;
        border-left: 3px solid #f44336; }
      body .wrapper .msg .msg-content .by {
        float: right;
        padding: 10px;
        width: 100px;
        background: #e91e63;
        text-align: center; }
    body .wrapper .msg .msg-btn {
      position: absolute;
      right: 2vw;
      font-size: 15px !important;
      padding: 10px;
      width: 100px;
      border-style: double !important;
      font-family: monospace; }
  body .wrapper #sherry .msg-btn {
    background: transparent;
    border: 1px solid #ffc107;
    color: #ffc107;
    font-weight: bold;
    cursor: pointer;
    font-size: 2vw;
    transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    border-top: transparent;
    top: 0; }
    body .wrapper #sherry .msg-btn:hover {
      background-color: #ffc107;
      color: #FFF; }
  body .wrapper #trina p {
    border-color: #ff5722; }
  body .wrapper #trina .by {
    background: #ffc107; }
  body .wrapper #trina .msg-btn {
    background: transparent;
    border: 1px solid #e91e63;
    color: #e91e63;
    font-weight: bold;
    cursor: pointer;
    font-size: 2vw;
    transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    bottom: 0;
    border-bottom: transparent; }
    body .wrapper #trina .msg-btn:hover {
      background-color: #e91e63;
      color: #FFF; }
  body .wrapper footer {
    font-family: monospace;
    font-size: 14px;
    text-align: right;
    padding: 10px 10px;
    color: #FFF;
    position: relative;
    background: #484848;
    z-index: 100; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width: 600px) {
  /* Styles */
  .page.msg {
    min-height: 100vh !important;
    height: auto !important;
    padding-bottom: 20px; }
    .page.msg .msg-content {
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      transform: initial !important;
      margin: 0 auto !important; }
    .page.msg .msg-btn {
      display: none; } }