html, body, #main {
  background: #0747a0 -webkit-gradient(linear, left top, left bottom, from(#0747a0), to(#4482ce));
  background: #0747a0 linear-gradient(#0747a0, #4482ce);
  color: #fff;
}

#header .nav {
  -webkit-filter: drop-shadow(0 0.1em 0.05em rgba(0, 0, 0, 0.35));
          filter: drop-shadow(0 0.1em 0.05em rgba(0, 0, 0, 0.35));
  max-width: 16.66667em;
}

#footer {
  -webkit-filter: drop-shadow(0 0 0.2em #000);
          filter: drop-shadow(0 0 0.2em #000);
}

#main {
  display: flow-root;
  padding-top: 0.1px;
}

.nav-logo {
  content: url(/img/xinstar-logo3.png);
}

.bg-area {
  background: #0747a0 -webkit-gradient(linear, left top, left bottom, from(#0747a0), to(#4482ce));
  background: #0747a0 linear-gradient(#0747a0, #4482ce);
}

/*===================*/
/* MAIN PAGE CONTENT */
.head-title {
  padding: 5.96667em 0;
  min-height: 18em;
}

.border {
  position: relative;
  display: table;
  z-index: 0;
  font-weight: 700;
  max-width: 90%;
  margin: 3em auto 0.75em;
  color: #192873;
}
.border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-filter: drop-shadow(0 0 0.25em rgba(0, 0, 102, 0.5));
          filter: drop-shadow(0 0 0.25em rgba(0, 0, 102, 0.5));
  -o-border-image: url(/img/Edm/Game_SnowQueen/border.png) 180 fill/3em/2.65em 2.9em 1.75em;
     border-image: url(/img/Edm/Game_SnowQueen/border.png) 180 fill/3em/2.65em 2.9em 1.75em;
  pointer-events: none;
}
.border video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
.border iframe {
  display: block;
  width: 15em;
  height: 8.4em;
  max-width: 100%;
}

#content-area {
  position: relative;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  width: 100vw;
  max-width: 1000px;
  min-height: 10em;
}

.btn-play {
  font-size: inherit;
  display: block;
  margin: 0 auto 0;
  position: relative;
  z-index: 1;
  width: 5em;
  height: 5em;
  border-radius: 2.5em;
  border: none;
  cursor: pointer;
}
.btn-play::after, .btn-play::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  bottom: 0;
  right: -50%;
  background: url(/img/Edm/Game_SnowQueen/bg-button.jpg) 0 0/200% auto;
  border-radius: inherit;
  -webkit-animation: btnPlay1 2s infinite ease-in-out;
          animation: btnPlay1 2s infinite ease-in-out;
  pointer-events: none;
}
.btn-play::after {
  background-position: 100% 0;
  -webkit-animation: btnPlay2 2s infinite ease-in-out;
          animation: btnPlay2 2s infinite ease-in-out;
  opacity: 0;
  -webkit-transition: opacity 0.1s, -webkit-transform 0.1s;
  transition: opacity 0.1s, -webkit-transform 0.1s;
  transition: opacity 0.1s, transform 0.1s;
  transition: opacity 0.1s, transform 0.1s, -webkit-transform 0.1s;
}
.btn-play b {
  position: absolute;
  top: 1em;
  left: 0.9em;
  z-index: 1;
  width: 3em;
  height: 3em;
  -webkit-transform: translate(0, 0.1em);
          transform: translate(0, 0.1em);
  -webkit-animation: btnPlay 2s infinite ease-in-out;
          animation: btnPlay 2s infinite ease-in-out;
  pointer-events: none;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
}
.btn-play b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(/img/Edm/Game_SnowQueen/bg-button2.png) 100% 100%/100% auto;
  -webkit-transition: -webkit-filter 0.5s;
  transition: -webkit-filter 0.5s;
  transition: filter 0.5s;
  transition: filter 0.5s, -webkit-filter 0.5s;
}
.btn-play:hover b, .btn-play:active b {
  -webkit-transition: -webkit-transform 0.65s;
  transition: -webkit-transform 0.65s;
  transition: transform 0.65s;
  transition: transform 0.65s, -webkit-transform 0.65s;
  -webkit-transform: translate(0, 0) scale(1.05);
          transform: translate(0, 0) scale(1.05);
}
.btn-play:hover b::before, .btn-play:active b::before {
  -webkit-filter: drop-shadow(0 0 0.025em #008) drop-shadow(0 0 0.25em #dff) drop-shadow(0 0 0.25em rgba(0, 0, 136, 0.5));
          filter: drop-shadow(0 0 0.025em #008) drop-shadow(0 0 0.25em #dff) drop-shadow(0 0 0.25em rgba(0, 0, 136, 0.5));
}

/*=====================*/
/* KEYFRAMES AND MEDIA */
@-webkit-keyframes btnPlay {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(30deg);
            filter: hue-rotate(30deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
}
@keyframes btnPlay {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(30deg);
            filter: hue-rotate(30deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
}
@-webkit-keyframes btnPlay1 {
  15% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
}
@keyframes btnPlay1 {
  15% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
}
@-webkit-keyframes btnPlay2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes btnPlay2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 1920px) {
  #main, .modal {
    font-size: 3.125vw;
  }
}
@media (max-width: 1280px) {
  #main, .modal {
    font-size: 40px;
  }
}/*# sourceMappingURL=main.css.map */