@charset "UTF-8";
@font-face {
  font-family: 'CsRegular';
  src: url("https://cso.beanfun.com/assets/font/regular.ttf") format("truetype"); }

body > * {
  /* Works on Chrome, Edge, and Safari */
  /* Works on Firefox */
  scrollbar-width: thin;
  /* "auto" or "thin" */
  scrollbar-color: #232424 transparent;
  /* scroll thumb and track */
  scrollbar-base-color: #000;
  scrollbar-face-color: #232424;
  scrollbar-3dlight-color: #000;
  scrollbar-highlight-color: #000;
  scrollbar-track-color: #000;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #000;
  scrollbar-dark-shadow-color: #000; }
  body > * ::-webkit-scrollbar {
    width: 5px;
    /* width of the entire scrollbar */
    height: 5px; }
  body > * ::-webkit-scrollbar-track {
    background: transparent;
    /* color of the tracking area */ }
  body > * ::-webkit-scrollbar-thumb {
    background: #232424;
    /* color of the scroll thumb */
    border-radius: 0px;
    /* roundness of the scroll thumb */ }
  body > * ::-webkit-scrollbar-corner {
    /* the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. */
    background-color: transparent; }

body {
  background: #000;
  color: #FFFFFF;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,PingFang TC,PingFang SC,Hiragino Sans GB,Microsoft JhengHei,Microsoft YaHei,Source Han Sans CN,sans-serif;
  position: relative;
  overflow-x: hidden; }

h1, h2, h3, h4, h5, p, span, th, td {
  margin: 0px; }

ul {
  padding: 0 0 0 0;
  margin: 0;
  list-style: none;
  list-style-image: none; }

a.metal-btn {
  background: #9D9D9D;
  background: linear-gradient(white, #9D9D9D);
  text-decoration: none;
  color: #000000;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  padding: 12px 39px; }
  a.metal-btn:hover {
    opacity: .85 !important; }

a.red-gradient-btn {
  background: #8C0504;
  background: linear-gradient(#C31412, #8C0504);
  text-decoration: none;
  color: white;
  font-size: 13px;
  font-weight: 400; }
  a.red-gradient-btn:hover {
    opacity: .85 !important; }

a span.icon-with-text {
  margin-left: 28px;
  position: relative; }
  a span.icon-with-text .icon {
    position: absolute;
    top: 0px;
    left: -28px;
    display: inline-block; }

@media all and (max-width: 1023px) {
  #BF_divHeader {
    display: none; } }

@-webkit-keyframes text-revealer {
  0%,
  50% {
    transform-origin: 0 50%; }
  60%,
  100% {
    transform-origin: 100% 50%; }
  60% {
    transform: scaleX(1); }
  100% {
    transform: scaleX(0); } }

@keyframes text-revealer {
  0%,
  50% {
    transform-origin: 0 50%; }
  60%,
  100% {
    transform-origin: 100% 50%; }
  60% {
    transform: scaleX(1); }
  100% {
    transform: scaleX(0); } }

@media all and (min-width: 1024px) {
  .hide-desktop {
    display: none !important; } }

@media all and (min-width: 1025px) {
  .hide-desktop-1024 {
    display: none !important; } }

@media all and (max-width: 1023px) {
  .hide-mobile {
    display: none !important; } }

@media all and (max-width: 1024px) {
  .hide-mobile-1024 {
    display: none !important; } }

@media all and (max-width: 1279px) {
  #topBar {
    display: none !important; }
  #BF_divActionBar {
    display: none !important; } }

body.fixed-nav nav.nav {
  position: fixed;
  width: 100vw;
  top: 0px; }
  @media all and (max-width: 1279px) {
    body.fixed-nav nav.nav {
      width: calc(100vw); } }

body.characters-page nav.nav li.desktop-logo,
body.weapons-page nav.nav li.desktop-logo {
  display: none; }

nav.nav {
  background: linear-gradient(black, rgba(0, 0, 0, 0));
  display: flex;
  align-items: center;
  padding: 0px 26.6px 0px 28px;
  z-index: 100;
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  position: relative; }
  nav.nav .close-btn {
    display: none; }
  nav.nav ul {
    padding: 0px; }
  nav.nav li {
    list-style: none;
    display: inline; }
    nav.nav li a {
      text-decoration: none;
      color: white;
      font-size: 13px;
      font-weight: 300;
      transition: opacity 0.2s cubic-bezier(0.5, 0, 0.75, 0); }
      nav.nav li a:hover {
        opacity: .85; }
    nav.nav li a.logo img {
      width: 10.42vw; }
  nav.nav li.mobile-logo {
    display: none; }
  nav.nav li.desktop-logo {
    display: block; }
  nav.nav ul.right-links {
    height: 92px;
    margin-left: auto; }
    nav.nav ul.right-links li {
      padding: 0px 12.5px; }
    nav.nav ul.right-links li.link {
      display: inline-block;
      height: 92px;
      position: relative; }
      nav.nav ul.right-links li.link::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(#C31412, transparent);
        z-index: -1;
        transform-origin: 50% 0%;
        transform: scaleY(0);
        transition: transform .2s ease; }
      nav.nav ul.right-links li.link:hover::after {
        transform: scaleY(1); }
      nav.nav ul.right-links li.link a {
        display: inline-flex;
        height: 92px;
        justify-content: center;
        align-items: center; }
        nav.nav ul.right-links li.link a:hover {
          opacity: 1; }
    nav.nav ul.right-links li.register-button {
      transform-origin: 0% 50%;
      padding: 0px 20px; }
      nav.nav ul.right-links li.register-button a {
        padding: 12px 36px; }
    nav.nav ul.right-links a span.icon-with-text {
      margin-left: 28px;
      position: relative; }
      nav.nav ul.right-links a span.icon-with-text .icon {
        position: absolute;
        top: 0px;
        left: -28px;
        display: inline-block; }
      nav.nav ul.right-links a span.icon-with-text__start-game .icon {
        top: 2px;
        left: -23px; }
    nav.nav ul.right-links li.mobile-links {
      display: none; }
  nav.nav .nav-hand {
    display: none; }
  @media all and (max-width: 1279px) {
    nav.nav {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      max-width: 390px;
      background: #000;
      border-right: 0;
      padding: 0;
      flex-direction: column;
      transform: translateX(101%);
      transition: transform .28s ease; }
      nav.nav.is-open {
        transform: translateX(0%); }
      nav.nav .close-btn {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 21px;
        right: -1px;
        background-image: url("../img/nav-toggle-btn.png");
        background-position: center;
        background-size: contain;
        width: 73px;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center; }
        nav.nav .close-btn svg {
          transition: opacity .12s ease; }
        nav.nav .close-btn:hover svg {
          opacity: .85; }
      nav.nav ul.logo-wrapper {
        margin-top: 37px;
        padding-left: 47.2px;
        width: 100%;
        box-sizing: border-box; }
      nav.nav li.desktop-logo {
        display: none; }
      nav.nav li.mobile-logo {
        display: block; }
      nav.nav ul.right-links {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        margin-top: 64.5px;
        margin-left: 0px;
        width: 100%;
        overflow: auto; }
        nav.nav ul.right-links li {
          padding-left: 50px;
          margin-right: 25px;
          margin-bottom: 36px; }
          nav.nav ul.right-links li a {
            font-size: 18px;
            font-weight: 500;
            line-height: 25px; }
        nav.nav ul.right-links li.link {
          height: 25px; }
          nav.nav ul.right-links li.link a {
            height: 25px; }
          nav.nav ul.right-links li.link:hover::after {
            display: none; }
        nav.nav ul.right-links li.register-button {
          padding-left: 50px;
          padding-top: 25.4px;
          padding-bottom: 25.3px;
          margin-top: 25px;
          margin-bottom: 21px;
          border: 1px solid #3B3B3B;
          border-left: 0;
          border-right: 0; }
          nav.nav ul.right-links li.register-button a {
            display: inline-block; }
          nav.nav ul.right-links li.register-button a.red-gradient-btn span.icon-with-text {
            font-size: 15px; }
            nav.nav ul.right-links li.register-button a.red-gradient-btn span.icon-with-text .icon {
              top: 2px; }
        nav.nav ul.right-links li.start-game {
          display: none; }
        nav.nav ul.right-links li.mobile-links {
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          padding-right: 17px; }
          nav.nav ul.right-links li.mobile-links .mobile-links-media,
          nav.nav ul.right-links li.mobile-links .mobile-links-help {
            display: flex;
            flex-wrap: nowrap; }
            nav.nav ul.right-links li.mobile-links .mobile-links-media a,
            nav.nav ul.right-links li.mobile-links .mobile-links-help a {
              display: inline-block;
              width: 36px;
              height: 36px;
              margin-right: 25px; }
              nav.nav ul.right-links li.mobile-links .mobile-links-media a:hover,
              nav.nav ul.right-links li.mobile-links .mobile-links-help a:hover {
                opacity: 1; }
              nav.nav ul.right-links li.mobile-links .mobile-links-media a:hover svg .icon-bg,
              nav.nav ul.right-links li.mobile-links .mobile-links-help a:hover svg .icon-bg {
                fill: white; }
            nav.nav ul.right-links li.mobile-links .mobile-links-media a:last-of-type,
            nav.nav ul.right-links li.mobile-links .mobile-links-help a:last-of-type {
              margin-right: 0; }
          nav.nav ul.right-links li.mobile-links .mobile-links-media {
            margin-right: 25px; }
      nav.nav .nav-hand {
        display: block;
        position: absolute;
        -webkit-filter: blur(7px) brightness(89%) opacity(0.8);
        filter: blur(7px) brightness(89%) opacity(0.8);
        z-index: -1;
        top: 35px;
        left: 81px;
        opacity: 0;
        width: 250px;
        height: 250px;
        transform-origin: 50% 50%; } }
  @media all and (max-width: 430px) {
    nav.nav {
      width: calc(100vw - 38px);
      max-width: unset; }
      nav.nav li.mobile-logo img {
        width: 186px;
        height: 25px; }
      nav.nav ul.right-links {
        margin-top: 50px; }
        nav.nav ul.right-links li.mobile-links {
          flex-wrap: wrap; }
          nav.nav ul.right-links li.mobile-links .mobile-links-media {
            margin-bottom: 20px; } }

.toggle-nav-btn-mobile {
  display: none; }
  @media all and (max-width: 1279px) {
    .toggle-nav-btn-mobile {
      cursor: pointer;
      display: block;
      position: fixed;
      z-index: 99;
      top: 21px;
      right: -1px;
      background-image: url("../img/nav-toggle-btn.png");
      background-position: center;
      background-size: contain;
      width: 73px;
      height: 56px;
      display: flex;
      justify-content: center;
      align-items: center; }
      .toggle-nav-btn-mobile svg {
        opacity: .5;
        transition: opacity .12s ease; }
      .toggle-nav-btn-mobile:hover svg {
        opacity: 1; } }

.nav-block-layer {
  display: none; }
  @media all and (max-width: 1279px) {
    .nav-block-layer {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 99; }
      .nav-block-layer.is-open {
        display: block; } }

.weapon-categories {
  display: inline-flex;
  border-bottom: 1px solid #707070;
  padding-left: 8.05vw;
  position: relative;
  z-index: 1; }
  .weapon-categories .weapon-category {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 35px 9.5px 17px 9.5px;
    margin-right: 13px;
    height: 52px;
    position: relative;
    cursor: pointer; }
    .weapon-categories .weapon-category svg {
      transition: transform .5s; }
    .weapon-categories .weapon-category:before {
      content: '';
      opacity: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      transform: scaleY(0);
      transform-origin: 0 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background: linear-gradient(rgba(195, 20, 18, 0), #c31412);
      transition: transform .5s, opacity .5s; }
    .weapon-categories .weapon-category .name {
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 0.05em;
      line-height: 17px;
      color: #7E7E7E;
      white-space: nowrap; }
    .weapon-categories .weapon-category:hover .name {
      color: white !important; }
    .weapon-categories .weapon-category:hover svg path {
      fill: white !important; }
    .weapon-categories .weapon-category.active svg {
      transform: translateY(-10px) rotateZ(-20deg); }
    .weapon-categories .weapon-category.active svg path {
      fill: #C6B4B4; }
    .weapon-categories .weapon-category.active .name {
      color: #C6B4B4; }
    .weapon-categories .weapon-category.active:before {
      opacity: 1;
      transform: scaleY(1); }

.mode-data {
  display: inline-flex;
  align-items: center;
  margin-bottom: 13px; }
  .mode-data .mode-img {
    width: 78px; }
  .mode-data .mode-value-blocks {
    display: inline-flex;
    margin-left: 13px; }
    .mode-data .mode-value-blocks svg {
      margin-left: -4px; }
      .mode-data .mode-value-blocks svg .start, .mode-data .mode-value-blocks svg .stop {
        transition: stop-color .5s; }
      .mode-data .mode-value-blocks svg.active .start {
        stop-color: #C31412; }
      .mode-data .mode-value-blocks svg.active .stop {
        stop-color: #8C0504; }
      .mode-data .mode-value-blocks svg.none .start {
        stop-color: #000; }
      .mode-data .mode-value-blocks svg.none .stop {
        stop-color: #000; }

#loader {
  background-color: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 1s ease, transform .5s; }
  #loader svg {
    -webkit-animation: breath 3s infinite;
    animation: breath 3s infinite;
    transform-origin: 50% 50%;
    transform: scale(0.8); }
  #loader.hide.bounce-out {
    transform: scale(6); }
  #loader.hide {
    opacity: 0; }
  #loader video.logo-video {
    width: 802px; }
    #loader video.logo-video.hide {
      display: none; }
  #loader video.intro-video {
    height: 100%; }
    #loader video.intro-video.hide {
      display: none; }
  @media screen and (min-width: 1601px) {
    #loader video.intro-video {
      align-self: flex-start;
      height: auto;
      width: 95%; } }
  @media screen and (max-width: 1279px) {
    #loader video.intro-video {
      align-self: flex-start;
      height: 97%;
      position: relative;
      top: 1.5%; } }
  @media screen and (max-width: 802px) {
    #loader video.logo-video {
      width: 770px; } }

@-webkit-keyframes breath {
  0%, 100% {
    opacity: 1; }
  40% {
    opacity: .6; } }

@keyframes breath {
  0%, 100% {
    opacity: 1; }
  40% {
    opacity: .6; } }

@-webkit-keyframes breath-gif {
  0% {
    opacity: 1; }
  25% {
    opacity: 0; }
  75% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes breath-gif {
  0% {
    opacity: 1; }
  25% {
    opacity: 0; }
  75% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeInOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0); }
  50% {
    opacity: 0;
    transform: translateX(-8%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes fadeInOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0); }
  50% {
    opacity: 0;
    transform: translateX(-8%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

#system-msg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 99;
  display: none; }
  #system-msg.show {
    display: block; }
  #system-msg .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 13px 20px 12px 20px;
    border-radius: 12px;
    line-height: 21px;
    background-color: #3B3B3B;
    font-size: 15px;
    width: 465px;
    text-align: center; }
  @media screen and (max-width: 768px) {
    #system-msg .content {
      width: 320px;
      min-width: 320px; } }

.UNI-footer .m-show {
  font-size: 10px !important; }

.template-wrapper {
  display: none !important;
  visibility: hidden !important; }

#landscape-block {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #000;
  text-align: center; }
  #landscape-block img {
    width: 191px;
    height: 189px; }
  #landscape-block p {
    margin-top: 46px; }

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  body.is-mobile {
    overflow: hidden; }
    body.is-mobile #landscape-block {
      display: flex; } }

#ie9-popup {
  display: none; }

.mobile-logo-and-bg .mobile-nav-black-bg, .mobile-logo-and-bg .mobile-logo {
  display: none; }

@media all and (max-width: 1279px) {
  .mobile-logo-and-bg .mobile-nav-black-bg {
    background: linear-gradient(black, rgba(0, 0, 0, 0));
    width: 100%;
    height: 92px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 11;
    display: block; }
  .mobile-logo-and-bg .mobile-logo {
    position: fixed;
    z-index: 12;
    top: 20px;
    left: 21px;
    display: initial; }
    .mobile-logo-and-bg .mobile-logo img {
      width: 131px; } }

.stop-animation {
  -webkit-animation: unset !important;
  animation: unset !important; }

#fixed-indicator {
  width: 0px;
  height: 0px; }

body.fixed-nav section#top-section {
  margin-top: 0px; }
  body.fixed-nav section#top-section #top-images {
    position: fixed;
    width: 100vw;
    left: 0px;
    top: 0px; }

#BF_divActionBar {
  transition: opacity 1s;
  transition-delay: 3s;
  opacity: 1; }

body.hide-beafun-footer #BF_divActionBar {
  opacity: 0; }

body.disable-scroll {
  overflow: hidden;
  touch-action: none;
  -ms-touch-action: none; }

section#top-section {
  position: relative;
  height: 100vh;
  min-height: 800px;
  width: 100vw;
  margin-top: -92px;
  overflow: hidden; }
  section#top-section #top-images {
    transition: opacity 1.5s;
    position: absolute;
    width: 100%;
    height: 100%; }
    section#top-section #top-images #parallax-scene-left {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 50vw;
      overflow: hidden; }
      section#top-section #top-images #parallax-scene-left .top-image__man {
        width: 100vw; }
    section#top-section #top-images #parallax-scene-right {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 50vw;
      overflow: hidden; }
      section#top-section #top-images #parallax-scene-right .zombie-img {
        width: 100vw;
        top: 1.47vw !important;
        left: -51.2vw !important; }
    section#top-section #top-images img {
      max-width: 100vw;
      position: absolute; }
      section#top-section #top-images img.full-width {
        width: 100vw; }
    section#top-section #top-images .top-image__man {
      top: -6.4vw; }
    section#top-section #top-images .top-image__bottom-brush {
      top: 671px; }
  section#top-section .gamania-group-icons {
    width: 242px;
    top: 642px;
    left: 38px;
    position: absolute; }
  section#top-section .banner {
    position: absolute;
    left: 38px;
    top: 448px;
    width: 540px;
    height: 156px; }
    section#top-section .banner .banner-img {
      width: 100%;
      height: 100%; }
    section#top-section .banner .banner-link {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      cursor: pointer; }
      section#top-section .banner .banner-link.hidden {
        display: none; }
  section#top-section .slogans {
    position: absolute;
    z-index: 10;
    text-align: right;
    width: 350px;
    left: calc(100vw - 63px - 350px);
    top: 435px;
    padding-right: 34px; }
    section#top-section .slogans .cs-logo-en {
      width: 202px; }
    section#top-section .slogans img {
      position: initial; }
    section#top-section .slogans h2 {
      font-size: 35px;
      font-weight: 500;
      line-height: 52px;
      color: white;
      margin: 6px 0px 36px 0px;
      white-space: nowrap; }
    section#top-section .slogans .game-modes {
      margin-right: 5px;
      width: 319px;
      margin-bottom: 11.5px; }
    section#top-section .slogans p {
      color: #D1D1D1;
      font-size: 13px;
      line-height: 15px;
      margin-right: 20px; }
    section#top-section .slogans .mobile-top-section-arrow {
      display: none; }
  @media screen and (max-width: 1279px) {
    section#top-section {
      overflow: hidden;
      position: relative;
      width: 100vw;
      margin-top: 0px;
      top: 0px;
      min-height: auto; }
      section#top-section #top-images {
        position: fixed;
        height: 189vw;
        width: 100vw;
        top: 0px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
        section#top-section #top-images #parallax-scene-left, section#top-section #top-images #parallax-scene-right, section#top-section #top-images #parallax-scene-full {
          display: none; }
        section#top-section #top-images img.full-width {
          display: none; }
      section#top-section .slogans .mobile-top-section-arrow {
        width: 28px;
        display: initial; }
      section#top-section .gamania-group-icons {
        display: none; }
      section#top-section .banner {
        display: none; } }
  @media screen and (min-width: 768px) and (max-width: 1279px) {
    section#top-section {
      height: 900px; }
      section#top-section #top-images {
        background-image: url("../img/index-page/top-section/top-section-bg-tablet.png");
        background-position: top; }
      section#top-section .slogans {
        top: 540px;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        padding-right: 0px; }
        section#top-section .slogans .cs-logo-en {
          width: 156px; }
        section#top-section .slogans .game-modes {
          width: auto;
          height: 49px; }
        section#top-section .slogans h2 {
          font-size: 30px;
          line-height: 42px;
          font-weight: 500;
          margin-bottom: 23px; }
        section#top-section .slogans p {
          text-align: right;
          margin-right: -5px; } }
  @media screen and (min-width: 1023px) and (max-width: 1279px) {
    section#top-section #top-images .slogans {
      top: 500px; } }
  @media screen and (max-width: 767px) {
    section#top-section {
      height: 700px; }
      section#top-section #top-images {
        position: fixed;
        background-image: url("../img/index-page/top-section/top-section-bg-mobile.png");
        background-position-y: top;
        background-size: 112%; }
        section#top-section #top-images img {
          max-width: initial; }
          section#top-section #top-images img.full-width {
            width: 216vw;
            transform: translateX(-57vw); }
        section#top-section #top-images .top-image__bottom-brush {
          top: 771.75px; }
        section#top-section #top-images .top-image__man {
          top: -13.8vw; }
      section#top-section .slogans {
        text-align: center;
        padding-right: 0px;
        position: absolute;
        width: 100vw;
        left: initial;
        top: 90.4vw; }
        section#top-section .slogans .cs-logo-en {
          width: 36.5vw; }
        section#top-section .slogans .game-modes {
          margin-right: 0px;
          width: auto;
          height: 49px; }
        section#top-section .slogans h2 {
          font-size: 30px;
          line-height: 42px;
          margin: 0px 0px 26.4px 0px; }
        section#top-section .slogans p {
          max-width: 358px;
          font-size: 12px;
          text-align: right;
          margin-right: auto;
          margin-left: auto; } }

section#top-news {
  padding: 0px 27.5px;
  height: 22.83vw;
  margin-top: -7.5vh; }
  section#top-news.hide {
    opacity: 0 !important;
    height: 1px !important;
    margin-top: 0 !important; }
  section#top-news .swiper-container-and-navs {
    position: relative; }
  section#top-news .swiper-container {
    width: 90.2vw; }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      section#top-news .swiper-container {
        overflow-x: scroll; } }
  section#top-news .swiper-button-prev, section#top-news .swiper-button-next {
    border-top: 2px solid #BBB6B4;
    border-right: 2px solid #BBB6B4;
    width: 2.5vw;
    height: 2.5vw;
    outline: 0;
    box-shadow: none; }
    section#top-news .swiper-button-prev:after, section#top-news .swiper-button-next:after {
      content: ""; }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      section#top-news .swiper-button-prev, section#top-news .swiper-button-next {
        display: none; } }
  section#top-news .swiper-button-prev, section#top-news .swiper-container-rtl .swiper-button-next {
    left: 0.35vw; }
  section#top-news .swiper-button-next, section#top-news .swiper-container-rtl .swiper-button-prev {
    right: 0.35vw; }
  section#top-news .swiper-button-next {
    transform: rotate(45deg); }
  section#top-news .swiper-button-prev {
    transform: rotate(225deg); }
  section#top-news .swiper-slide {
    height: 22.7vw;
    width: 28.47vw;
    margin: 0px 1.04vw;
    border: 1px solid #555555;
    border-bottom: none;
    display: block; }
    section#top-news .swiper-slide div.img {
      width: 28.6vw;
      padding-top: 55.56%;
      max-width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center; }
    section#top-news .swiper-slide .news-info {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='412' height='119.522' viewBox='0 0 412 119.522'%3E%3Cpath d='M0-22.522H266.963L274.215,0H412V97H0Z' transform='translate(0 22.522)'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 8.3vw;
      position: absolute;
      bottom: 1px;
      border-bottom: 1px solid #555555;
      height: 120px;
      width: 100%; }
      section#top-news .swiper-slide .news-info .date-and-category {
        color: #969696;
        font-weight: 500;
        font-size: 1.04vw;
        line-height: 21px;
        margin: 8.5px 15px 0px 15px; }
        section#top-news .swiper-slide .news-info .date-and-category .date {
          margin-right: 16px; }
      section#top-news .swiper-slide .news-info .title {
        color: white;
        font-weight: 500;
        font-size: 1.39vw;
        line-height: 28px;
        margin: 14px 16px 15px 16px;
        height: 56px;
        overflow-y: hidden; }
  @media screen and (min-width: 768px) and (max-width: 1279px) {
    section#top-news {
      margin-top: 0px; } }
  @media screen and (max-width: 767px) {
    section#top-news {
      margin-top: 0px; } }
  @media screen and (max-width: 1023px) {
    section#top-news {
      padding: 0px;
      height: auto; }
      section#top-news .swiper-container {
        width: 100vw; }
      section#top-news .swiper-button-prev, section#top-news .swiper-button-next {
        display: none; }
      section#top-news .swiper-slide {
        height: 226.5px;
        width: 285.8px;
        margin: 0px 1.5vw; }
        section#top-news .swiper-slide div.img {
          width: 100%;
          padding-top: 57%; }
        section#top-news .swiper-slide .news-info {
          bottom: 0px;
          height: 82px; }
          section#top-news .swiper-slide .news-info .date-and-category {
            font-size: 11px;
            line-height: 16px; }
          section#top-news .swiper-slide .news-info .title {
            margin-top: 7px;
            font-size: 13px;
            line-height: 18px;
            height: 36px; } }

section#weapons {
  min-height: 91.9vw;
  width: 96.25vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 110px;
  margin-bottom: 150px;
  border: 1px solid #3B3B3B;
  position: relative;
  background: #000; }
  section#weapons .weapons-banner {
    background-image: url("../img/index-page/weapons/weapons-banner.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 38.3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 179px; }
    section#weapons .weapons-banner h1 {
      font-family: CsRegular;
      font-size: 80px;
      font-weight: 300;
      line-height: 57px;
      margin-top: 364px;
      margin-bottom: 29px; }
    section#weapons .weapons-banner h2 {
      color: white;
      font-size: 30px;
      font-weight: 500;
      line-height: 37px;
      margin-bottom: 12px; }
    section#weapons .weapons-banner h3 {
      color: #7E7E7E;
      font-size: 20px;
      font-weight: 300;
      line-height: 28px;
      margin-bottom: 32.5px; }
  section#weapons:before {
    position: absolute;
    bottom: -70px;
    left: 0px;
    content: '';
    width: 100%;
    height: 63.8vw;
    z-index: 0;
    background-image: url("../img/index-page/weapons/weapon-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: contain; }
  section#weapons .weapon-categories {
    border-bottom: 1px solid #3B3B3B; }
  section#weapons .weapon-bg {
    position: absolute;
    left: 0px;
    bottom: 0px;
    max-width: 100%;
    z-index: -1;
    width: 100vw; }
  section#weapons .weapon {
    position: relative; }
    section#weapons .weapon .weapon-img {
      width: 38.2vw;
      position: absolute;
      left: 29.5vw;
      top: 85px;
      z-index: 1;
      transform: scaleY(1) scaleX(-1); }
      section#weapons .weapon .weapon-img.hide {
        display: none; }
      section#weapons .weapon .weapon-img.animate-out {
        -webkit-animation: right-out 0.7s cubic-bezier(0.65, 0, 0.35, 1);
        animation: right-out 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
      section#weapons .weapon .weapon-img.animate-in {
        -webkit-animation: left-in 0.7s cubic-bezier(0.65, 0, 0.35, 1);
        animation: left-in 0.7s cubic-bezier(0.65, 0, 0.35, 1); }

@-webkit-keyframes right-out {
  0% {
    transform: translate(0, 0) scaleY(1) scaleX(-1);
    opacity: 1; }
  45% {
    transform: translate(50%, 2%) scaleY(1.4) scaleX(-1.4);
    opacity: 0; }
  100% {
    transform: translate(0, 0) scaleY(1) scaleX(-1);
    opacity: 0; } }

@keyframes right-out {
  0% {
    transform: translate(0, 0) scaleY(1) scaleX(-1);
    opacity: 1; }
  45% {
    transform: translate(50%, 2%) scaleY(1.4) scaleX(-1.4);
    opacity: 0; }
  100% {
    transform: translate(0, 0) scaleY(1) scaleX(-1);
    opacity: 0; } }

@-webkit-keyframes left-in {
  0% {
    transform: translate(0, 0) scaleY(1) scaleX(-1);
    opacity: 0; }
  55% {
    transform: translate(-50%, 2%) scaleY(1.4) scaleX(-1.4);
    opacity: 0; }
  100% {
    transform: translate(0, 0) scaleY(1) scaleX(-1);
    opacity: 1; } }

@keyframes left-in {
  0% {
    transform: translate(0, 0) scaleY(1) scaleX(-1);
    opacity: 0; }
  55% {
    transform: translate(-50%, 2%) scaleY(1.4) scaleX(-1.4);
    opacity: 0; }
  100% {
    transform: translate(0, 0) scaleY(1) scaleX(-1);
    opacity: 1; } }
    section#weapons .weapon .main-img {
      position: absolute;
      right: 2vw;
      top: -71px;
      transition: opacity 1s cubic-bezier(0.45, 0, 0.55, 1), transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
      transform: translate3d(0%, 0, 0px) perspective(800px) rotateY(340deg);
      width: 41.67vw; }
      section#weapons .weapon .main-img.hide {
        transition: opacity 0.6s cubic-bezier(0.45, 0, 0.55, 1), transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
        transform: translate3d(15%, 0, 100px) perspective(600px) rotateY(340deg);
        opacity: 0; }
    section#weapons .weapon .data {
      display: inline-flex;
      flex-direction: column;
      margin-left: 3.64vw;
      margin-top: 133px; }
      section#weapons .weapon .data.animate-fade-out-in-left {
        -webkit-animation: fadeInOutLeft 1s cubic-bezier(0.65, 0, 0.35, 1);
        animation: fadeInOutLeft 1s cubic-bezier(0.65, 0, 0.35, 1); }
      section#weapons .weapon .data .category {
        color: #969696;
        font-size: 13px;
        font-family: CsRegular;
        letter-spacing: 0.05em;
        margin-bottom: 5px;
        transition: opacity .7s, transform .5s;
        transition-delay: 1.2s;
        opacity: 1; }
        section#weapons .weapon .data .category.hide {
          transition: opacity 0s;
          opacity: 0; }
      section#weapons .weapon .data .name {
        color: white;
        font-size: 20px;
        font-weight: 400;
        line-height: 28px;
        margin-bottom: 24.6px;
        transition: opacity .7s, transform .5s;
        transition-delay: 1.5s;
        opacity: 1; }
        section#weapons .weapon .data .name.hide {
          transition: opacity 0s;
          opacity: 0; }
      section#weapons .weapon .data .description {
        display: none;
        color: white;
        font-size: 15px;
        font-weight: 300;
        line-height: 23px;
        max-width: 319px;
        margin-top: 20.4px;
        margin-bottom: 65px;
        min-height: 92px; }
    section#weapons .weapon .more-weapon-details {
      display: none; }
  @media screen and (min-width: 1024px) and (max-width: 1279px) {
    section#weapons {
      min-height: 110vw; }
      section#weapons .weapons-banner {
        margin-bottom: 250px; }
      section#weapons .weapon-categories {
        padding-left: 3vw; }
        section#weapons .weapon-categories .weapon-category {
          margin-right: 5px; }
      section#weapons .weapon::before {
        bottom: -50px; } }
  @media screen and (min-width: 1601px) {
    section#weapons {
      min-height: 87vw; }
      section#weapons .weapons-banner h1 {
        margin-top: 28vw; } }
  @media screen and (min-width: 1280px) {
    section#weapons .weapon .data {
      margin-left: 8.2vw; } }
  @media screen and (min-width: 1024px) {
    section#weapons .weapons-banner {
      position: relative; } }
  @media screen and (max-width: 1023px) {
    section#weapons {
      margin-top: 69.1px;
      width: 95.3vw;
      margin-bottom: 0px;
      background-color: #000;
      background-image: url("../img/index-page/weapons/weapon-bg-mobile.png");
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: 290%; }
      section#weapons .weapons-banner {
        background-image: url("../img/index-page/weapons/weapons-banner.png");
        background-position: top; }
        section#weapons .weapons-banner h1 {
          margin-top: 58.87vw;
          margin-bottom: 10px;
          font-size: 50px;
          line-height: 36px; }
        section#weapons .weapons-banner h2 {
          font-size: 24px;
          font-weight: 500;
          line-height: 37px;
          margin-bottom: 22px; }
        section#weapons .weapons-banner h3 {
          font-size: 15px;
          font-weight: 300;
          line-height: 21px;
          margin-bottom: 0px; }
        section#weapons .weapons-banner a.metal-btn {
          display: none; }
      section#weapons .weapon-categories {
        padding-left: 0px;
        overflow-x: scroll;
        width: 100%;
        border-bottom: 1px solid #3B3B3B; }
        section#weapons .weapon-categories .weapon-category {
          white-space: nowrap; }
      section#weapons .weapon {
        overflow-x: hidden;
        height: 126.6vw;
        overflow-y: hidden; }
        section#weapons .weapon:before {
          height: 172vw; }
        section#weapons .weapon .main-img {
          width: 104.9vw;
          top: 33.9px;
          left: calc(10.67vw - 6.44vw);
          right: initial; }
        section#weapons .weapon .weapon-img {
          width: 64.77vw;
          top: 289.9px;
          left: 41.2px; }
        section#weapons .weapon .data {
          margin-top: 101.4vw;
          margin-left: 6.44vw; }
          section#weapons .weapon .data .category {
            font-size: 9px; }
          section#weapons .weapon .data .mode-data, section#weapons .weapon .data .description {
            display: none; }
        section#weapons .weapon .more-weapon-details {
          width: 197px;
          height: 40px;
          display: inline-block;
          position: absolute;
          bottom: -1px;
          left: 50%;
          transform: translateX(-50%); }
          section#weapons .weapon .more-weapon-details:after {
            content: '查看更多武器細節';
            position: absolute;
            top: 48%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 100%;
            text-align: center;
            color: #7E7E7E;
            font-size: 13px;
            font-weight: 300;
            line-height: 18px; } }
  @media screen and (max-width: 767px) {
    section#weapons .weapons-banner {
      background-image: url("../img/index-page/weapons/weapons-banner-mobile.png");
      height: 85.5vw;
      margin-bottom: calc(36px + 21px); }
    section#weapons .weapon-categories {
      padding-left: 4.09vw;
      width: calc(100% - 4.09vw);
      border-top: 1px solid #3B3B3B; }
    section#weapons .weapon {
      height: auto; }
      section#weapons .weapon .data {
        margin-top: 434px;
        margin-bottom: 13vw; }
      section#weapons .weapon .main-img {
        top: 13vw; }
      section#weapons .weapon .weapon-img {
        width: 277.25px; } }
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    section#weapons {
      background-size: 137%; }
      section#weapons .weapons-banner {
        height: auto;
        margin-bottom: 36px; }
        section#weapons .weapons-banner h1 {
          margin-top: 25.8vw; }
      section#weapons .weapon-categories {
        justify-content: center; }
      section#weapons .weapon {
        height: 69.8vw; }
        section#weapons .weapon:before {
          content: none; }
        section#weapons .weapon .main-img {
          width: 70.9vw;
          transform: translateX(0%) perspective(1500px) rotateY(340deg);
          left: initial;
          right: 21px;
          top: 41.9px; }
        section#weapons .weapon .weapon-img {
          width: 36.1vw;
          left: 76.5px;
          top: 258.8px; }
        section#weapons .weapon .data {
          display: flex;
          margin-top: 56.4vw;
          margin-left: auto;
          margin-right: auto;
          text-align: center; }
          section#weapons .weapon .data .category {
            margin-bottom: 4px; }
          section#weapons .weapon .data .name {
            font-size: 18px;
            line-height: 25px; } }

.opening {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 102;
  transition: opacity 0.05s, transform 0.33s ease-in;
  -o-object-fit: cover;
  object-fit: cover;
  transform: translateY(100vh); }
  .opening.fade-out {
    transition: opacity .4s;
    opacity: 0; }
  .opening.animate {
    transform: translateY(0); }
  .opening.hide {
    display: none; }

section#character {
  background-color: #000;
  position: relative;
  height: 70.76vw;
  z-index: 0; }
  section#character:before {
    content: '';
    position: absolute;
    top: -8vw;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url("../img/index-page/character/character-bg.png");
    z-index: -2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0; }
  section#character.fade-mode:before {
    transition: opacity 1s; }
  section#character.fade-mode .character-banner a.character-modal-trigger {
    transition: transform .5s, opacity 1s; }
  section#character.opening-ended:before {
    opacity: 1; }
  section#character .character-banner {
    display: flex;
    flex-direction: column;
    align-items: center; }
    section#character .character-banner h1 {
      font-family: CsRegular;
      font-size: 80px;
      font-weight: 300;
      line-height: 57px;
      margin-bottom: 15px;
      text-shadow: 0px 6px 9px rgba(0, 0, 0, 0.5);
      transition: opacity .5s;
      opacity: 1; }
      section#character .character-banner h1.hide {
        opacity: 0; }
    section#character .character-banner h2 {
      color: white;
      font-size: 30px;
      font-weight: 500;
      line-height: 37px;
      margin-bottom: 12px;
      text-shadow: 0px 6px 9px rgba(0, 0, 0, 0.5);
      transition: opacity .5s;
      opacity: 1; }
      section#character .character-banner h2.hide {
        opacity: 0; }
    section#character .character-banner a.character-modal-trigger {
      position: absolute;
      left: 0px;
      top: 0px;
      text-decoration: none;
      display: inline-block; }
      section#character .character-banner a.character-modal-trigger span.btn {
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(165, 165, 165, 0.5);
        padding: 10px 24px 10px 18px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        display: inline-block;
        transition: background-color .2s ease; }
        section#character .character-banner a.character-modal-trigger span.btn::after {
          background: #fff;
          content: "";
          height: 155px;
          left: -75px;
          opacity: .2;
          position: absolute;
          top: -50px;
          transform: rotate(35deg);
          transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1);
          width: 50px;
          z-index: 0; }
      section#character .character-banner a.character-modal-trigger.hide {
        opacity: 0; }
      section#character .character-banner a.character-modal-trigger svg {
        position: absolute;
        top: 47%;
        transform: translateX(50%) translateY(-50%);
        right: 0; }
      section#character .character-banner a.character-modal-trigger:hover span.btn {
        background-color: rgba(0, 0, 0, 0.87); }
        section#character .character-banner a.character-modal-trigger:hover span.btn::after {
          left: 120%;
          transition: all 650ms cubic-bezier(0.19, 1, 0.22, 1); }

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  40% {
    transform: rotate(360deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes rotate {
  0% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  40% {
    transform: rotate(360deg); }
  100% {
    transform: rotate(360deg); } }
      section#character .character-banner a.character-modal-trigger__terrorist {
        left: 19.09vw;
        top: 27.34vw; }
      section#character .character-banner a.character-modal-trigger__anti-terrorist {
        left: 43vw;
        top: 34vw; }
        section#character .character-banner a.character-modal-trigger__anti-terrorist span.btn {
          padding: 10px 18px 10px 24px; }
        section#character .character-banner a.character-modal-trigger__anti-terrorist svg {
          transform: translateX(-50%) translateY(-50%);
          left: 0;
          right: initial; }
      section#character .character-banner a.character-modal-trigger__zombie {
        left: 77vw;
        top: 14vw; }
        section#character .character-banner a.character-modal-trigger__zombie span.btn {
          padding: 10px 18px 10px 24px; }
        section#character .character-banner a.character-modal-trigger__zombie svg {
          transform: translateX(-50%) translateY(-50%);
          left: 0;
          right: initial; }
  @media screen and (max-width: 767px) {
    section#character {
      height: 196vw;
      padding-top: 100px; }
      section#character.opening-ended {
        background-image: url("../img/index-page/character/character-bg-mobile.png"); }
        section#character.opening-ended:before {
          content: none; }
      section#character .character-banner h1 {
        font-size: 50px;
        line-height: 36px;
        margin-bottom: 10px; }
      section#character .character-banner h2 {
        font-size: 24px;
        font-weight: 500;
        line-height: 37px;
        margin-bottom: 10px; }
      section#character .character-banner img {
        max-width: 50vw; }
      section#character .character-banner a.character-modal-trigger__terrorist {
        top: 91vw;
        left: 12vw; }
      section#character .character-banner a.character-modal-trigger__anti-terrorist {
        top: 115vw;
        left: 58vw; }
      section#character .character-banner a.character-modal-trigger__zombie {
        top: 136vw;
        left: 29vw; } }
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    section#character {
      padding-top: 230px; }
      section#character .character-banner {
        margin-top: -130px; }
        section#character .character-banner h1 {
          font-size: 50px;
          line-height: 36px;
          margin-bottom: 10px; }
        section#character .character-banner h2 {
          font-size: 24px; }
        section#character .character-banner a.character-modal-trigger {
          font-size: 15px; }
          section#character .character-banner a.character-modal-trigger__anti-terrorist {
            top: 58vw; }
          section#character .character-banner a.character-modal-trigger__terrorist {
            left: 14vw;
            top: 51vw; }
          section#character .character-banner a.character-modal-trigger__zombie {
            left: 64vw;
            top: 45vw; } }
  @media screen and (min-width: 1601px) {
    section#character.opening-ended:before {
      top: -6vw; }
    section#character .character-banner a.character-modal-trigger__terrorist {
      top: 24vw;
      left: 24vw; }
    section#character .character-banner a.character-modal-trigger__anti-terrorist {
      top: 30vw;
      left: 40vw; }
    section#character .character-banner a.character-modal-trigger__zombie {
      top: 14vw;
      left: 72vw; } }
  @media screen and (min-width: 1024px) {
    section#character {
      padding-top: 1px; }
      section#character.opening-ended:before {
        background-position: top; }
      section#character .character-banner {
        margin-top: 5vw; } }

section#game-mode {
  height: 1100px;
  background-image: url("../img/index-page/game-mode/game-mode-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 15%;
  position: relative;
  overflow: hidden;
  display: flex; }
  section#game-mode .game-mode-banner {
    position: absolute;
    left: 5.34vw;
    top: 6.04vw; }
    section#game-mode .game-mode-banner h1 {
      font-family: CsRegular;
      font-size: 80px;
      line-height: 57px;
      margin-bottom: 7px; }
    section#game-mode .game-mode-banner h2 {
      font-size: 30px;
      line-height: 37px;
      color: white;
      font-weight: 500;
      margin-bottom: 67px; }
  section#game-mode .game-mode-content {
    max-width: 1440px;
    width: 100%;
    margin: 350px 30px 293px 30px;
    height: 406px;
    display: flex;
    position: relative; }
    section#game-mode .game-mode-content #left-side,
    section#game-mode .game-mode-content #top-side,
    section#game-mode .game-mode-content #right-side,
    section#game-mode .game-mode-content #bottom-side {
      position: absolute;
      background: none transparent;
      width: 0px;
      height: 0px; }
    section#game-mode .game-mode-content #left-side {
      left: 0;
      bottom: 0;
      height: 100%;
      width: 1px; }
    section#game-mode .game-mode-content #top-side {
      top: 0;
      left: 0;
      width: 100%;
      height: 1px; }
    section#game-mode .game-mode-content #right-side {
      right: 0;
      top: 0;
      height: 100%;
      width: 1px; }
    section#game-mode .game-mode-content #bottom-side {
      bottom: 0;
      right: 0;
      width: 100%;
      height: 1px; }
    section#game-mode .game-mode-content .game-mode-scene {
      text-align: center;
      padding-bottom: 50px;
      transition: opacity 0.5s ease-out;
      position: absolute; }
      section#game-mode .game-mode-content .game-mode-scene:not(.active) {
        opacity: 0 !important;
        visibility: hidden; }
      section#game-mode .game-mode-content .game-mode-scene .game-mode-scene-img {
        position: relative;
        margin-bottom: 37px;
        border: 1px solid #7E7E7E;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center; }
        section#game-mode .game-mode-content .game-mode-scene .game-mode-scene-img .scene-bg-wrapper {
          text-align: center;
          margin: 2%;
          border-radius: 100%;
          overflow: hidden;
          height: 95.6%;
          width: 100%;
          -webkit-mask-image: -webkit-linear-gradient(white, black);
          border: 1px solid #7E7E7E;
          border-radius: 100%; }
          section#game-mode .game-mode-content .game-mode-scene .game-mode-scene-img .scene-bg-wrapper .scene-bg {
            margin: 0;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            padding-top: 100%; }
        section#game-mode .game-mode-content .game-mode-scene .game-mode-scene-img .scene-bg-wrapper .scene-bg {
          transition: transform 0.28s ease;
          border-radius: 100%;
          border: 1px solid transparent;
          transform: scale(1.02); }
        section#game-mode .game-mode-content .game-mode-scene .game-mode-scene-img .scene-bg-wrapper:hover .scene-bg {
          outline: none;
          transform: scale(1.25); }
        section#game-mode .game-mode-content .game-mode-scene .game-mode-scene-img img {
          width: 94%;
          margin: 3%;
          border-radius: 50%; }
      section#game-mode .game-mode-content .game-mode-scene p {
        width: 450px;
        margin: 0px auto;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: 0.05em;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 300;
        opacity: 0; }
      section#game-mode .game-mode-content .game-mode-scene p.active {
        -webkit-animation: fadeIn 0.3s ease-out normal forwards 1;
        animation: fadeIn 0.3s ease-out normal forwards 1;
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s; }

@-webkit-keyframes fadeIn {
  from {
    color: red;
    opacity: 0; }
  to {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1; } }

@keyframes fadeIn {
  from {
    color: red;
    opacity: 0; }
  to {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1; } }
  section#game-mode .swiper-container {
    text-align: initial;
    position: absolute;
    overflow-y: hidden; }
    section#game-mode .swiper-container .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 341px;
      height: 95px;
      transition: none;
      margin-top: 10px;
      position: relative; }
      section#game-mode .swiper-container .swiper-slide span {
        margin: 37px auto 37px auto;
        font-size: 15px;
        letter-spacing: 0.05em;
        line-height: 24px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 1s ease; }
      section#game-mode .swiper-container .swiper-slide img {
        transition: all .4s;
        border: 1px solid #C31412;
        margin: 4px 35px 4px 0px; }
      section#game-mode .swiper-container .swiper-slide .bg-layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 1px;
        bottom: 0;
        overflow: hidden; }
        section#game-mode .swiper-container .swiper-slide .bg-layer::after {
          content: '';
          z-index: -1;
          position: absolute;
          width: 200%;
          height: 500%;
          background: linear-gradient(#C31412, #8C0504);
          transform-origin: 70% 50%;
          transition: 0s ease-in-out;
          transition-delay: 0s;
          transform: translate(80%, 0%) rotate(45deg); }
    section#game-mode .swiper-container .swiper-slide:not(.swiper-slide-active) span {
      visibility: hidden; }
    section#game-mode .swiper-container .swiper-slide-next {
      margin-top: 20px; }
    section#game-mode .swiper-container .swiper-slide-prev .bg-layer::after {
      transition: 1s ease-in-out;
      opacity: 0; }
    section#game-mode .swiper-container .swiper-slide-active {
      position: relative; }
      section#game-mode .swiper-container .swiper-slide-active .bg-layer::after {
        transition: 0.8s ease-in-out;
        transition-delay: 0s;
        transform: translate(-10%, 0%) rotate(0deg); }
      section#game-mode .swiper-container .swiper-slide-active span {
        transition-delay: .9s;
        opacity: 1; }
  section#game-mode .game-mode__metal-btn__mobile {
    display: none; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    section#game-mode {
      height: 110vw !important;
      padding-top: 0px; } }
  @media all and (-ms-high-contrast: none) and (min-width: 1024px) {
    section#game-mode {
      margin-bottom: 0px !important; } }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      section#game-mode .game-mode-content {
        height: 110vw !important;
        margin: 0px auto !important;
        background-image: url("../img/index-page/game-mode/ie9.png") !important;
        background-repeat: no-repeat;
        background-size: 78% !important;
        background-position: top; }
        section#game-mode .game-mode-content * {
          display: none !important; } }
  @media all and (-ms-high-contrast: none) and (max-width: 768px) {
    section#game-mode {
      height: 850px !important; }
      section#game-mode .game-mode-content {
        height: 850px !important; } }
  @media all and (-ms-high-contrast: none) and (max-width: 576px) {
    section#game-mode {
      display: none; } }
  @media all and (min-width: 1441px) {
    section#game-mode .game-mode-content {
      margin: auto;
      width: calc(100% - 60px); } }
  @media all and (min-width: 1024px) {
    section#game-mode {
      margin-bottom: -180px; }
      section#game-mode .game-mode-content {
        justify-content: center;
        align-items: flex-end; }
        section#game-mode .game-mode-content .game-mode-scene .game-mode-scene-img {
          width: 35.27vw;
          height: 35.27vw;
          max-width: 508px;
          max-height: 508px; }
      section#game-mode .swiper-container {
        bottom: 0px;
        right: 0px;
        height: 330px; }
        section#game-mode .swiper-container .swiper-slide:not(.swiper-slide-active) img {
          width: 145px; }
        section#game-mode .swiper-container .swiper-slide-active {
          margin-top: 20px; }
          section#game-mode .swiper-container .swiper-slide-active img {
            width: 190px;
            margin: 4px 20px 4px 0px; } }
  @media screen and (max-width: 1023px) {
    section#game-mode {
      height: auto;
      flex-direction: column;
      justify-content: center;
      padding-top: 84.11vw; }
      section#game-mode .game-mode-content {
        height: 411px;
        margin: 0px auto 29px auto;
        width: calc(100% - 45px);
        text-align: center; }
        section#game-mode .game-mode-content .game-mode-banner {
          top: -84.11vw;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          text-align: center; }
          section#game-mode .game-mode-content .game-mode-banner h1 {
            font-size: 50px;
            line-height: 36px; }
          section#game-mode .game-mode-content .game-mode-banner h2 {
            font-size: 24px;
            line-height: 37px; }
          section#game-mode .game-mode-content .game-mode-banner h2 > br {
            display: none; }
          section#game-mode .game-mode-content .game-mode-banner a.metal-btn {
            display: none; }
        section#game-mode .game-mode-content .game-mode-scene {
          width: 76.6vw;
          margin: -53.27vw auto 0px auto;
          padding-bottom: 0px; }
          section#game-mode .game-mode-content .game-mode-scene .game-mode-scene-img {
            margin-bottom: 209px; }
            section#game-mode .game-mode-content .game-mode-scene .game-mode-scene-img circle:first-child {
              stroke-width: 2; }
          section#game-mode .game-mode-content .game-mode-scene p {
            width: 100%; }
        section#game-mode .game-mode-content .swiper-container {
          top: 34.48vw;
          overflow-x: hidden;
          width: 99.8%; }
          section#game-mode .game-mode-content .swiper-container .swiper-slide:not(.swiper-slide-active) {
            opacity: 0.58;
            align-items: unset;
            justify-content: unset;
            width: 29.44vw;
            height: 13.55vw;
            margin-top: 7.47vw;
            margin-left: 7.2vw;
            margin-right: 7.2vw; }
            section#game-mode .game-mode-content .swiper-container .swiper-slide:not(.swiper-slide-active) img {
              margin: 0px auto;
              max-width: 100%;
              width: 124px; }
            section#game-mode .game-mode-content .swiper-container .swiper-slide:not(.swiper-slide-active) span {
              width: 0; }
          section#game-mode .game-mode-content .swiper-container .swiper-slide.swiper-slide-prev {
            opacity: 0; }
          section#game-mode .game-mode-content .swiper-container .swiper-slide .bg-layer::after {
            width: 300%; }
          section#game-mode .game-mode-content .swiper-container .swiper-slide.swiper-slide-active {
            flex-direction: column;
            width: 46.02vw;
            height: 25.46vw;
            margin-top: 26px; }
            section#game-mode .game-mode-content .swiper-container .swiper-slide.swiper-slide-active span {
              order: 2;
              margin: 10.5px auto; }
            section#game-mode .game-mode-content .swiper-container .swiper-slide.swiper-slide-active img {
              order: 1;
              width: 40.35vw;
              margin: -20px auto 4px auto; }
            section#game-mode .game-mode-content .swiper-container .swiper-slide.swiper-slide-active .bg-layer::after {
              transform: translate(-25%, 0%) rotate(45deg); }
      section#game-mode .game-mode__metal-btn__mobile {
        width: calc(216px - 39px - 39px);
        height: calc(33px - 12px - 12px);
        text-align: center;
        line-height: calc(33px - 12px - 12px);
        margin: 0px auto 75px auto; } }
  @media all and (min-width: 768px) and (max-width: 1023px) {
    section#game-mode {
      padding-top: 410px; }
      section#game-mode .game-mode-content .game-mode-banner {
        top: -50vw; }
      section#game-mode .game-mode-content .game-mode-scene {
        width: 328px;
        margin-top: -230px;
        left: calc(50% - 164px); }
      section#game-mode .game-mode-content .swiper-container {
        top: 145px;
        transform: translateX(-50%);
        left: 50%;
        width: 80%; }
        section#game-mode .game-mode-content .swiper-container .swiper-slide:not(.swiper-slide-active) {
          width: 197px;
          height: 109px;
          padding: 0px 0px 0px 0px;
          margin-left: 0px;
          margin-right: 0px;
          margin-top: 30px;
          text-align: left; }
          section#game-mode .game-mode-content .swiper-container .swiper-slide:not(.swiper-slide-active) img {
            transform: scale(0.734);
            width: 172px;
            height: 79px; }
        section#game-mode .game-mode-content .swiper-container .swiper-slide.swiper-slide-active {
          width: 197px;
          height: 109px; }
          section#game-mode .game-mode-content .swiper-container .swiper-slide.swiper-slide-active img {
            width: 172px; } }
  @media all and (max-width: 767px) {
    section#game-mode .game-mode-content .game-mode-scene {
      left: calc(50vw - 50%); }
    section#game-mode .game-mode-content .swiper-container .swiper-slide.swiper-slide-active span {
      margin: 2.53vw auto; } }

section#long-screenshots .long-screenshots {
  top: initial;
  bottom: 50px; }

.UNI-footer.hasBF {
  border-top-color: transparent !important; }

#character-modal {
  z-index: 101;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center; }
  #character-modal:not(.active) {
    display: none; }
  #character-modal .character-modal-arrow {
    position: absolute;
    z-index: 2;
    left: 15vw;
    top: 6.5vw; }
    #character-modal .character-modal-arrow .svg-desktop {
      display: initial; }
    #character-modal .character-modal-arrow .svg-mobile {
      display: none; }
    #character-modal .character-modal-arrow svg {
      transition: opacity 0.5s; }
    #character-modal .character-modal-arrow:hover svg {
      opacity: 0.7; }
  #character-modal .character-info {
    position: absolute;
    z-index: 1;
    left: 11vw;
    top: 48.1vh;
    background-image: url("../img/index-page/character/character-info-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: calc(430px - 75px - 85px);
    height: calc(247px - 24px - 34px);
    padding: 24px 75px 34px 85px;
    text-align: left; }
    #character-modal .character-info .character-category {
      font-family: CsRegular;
      font-size: 13px;
      letter-spacing: 0.05em;
      color: #555555;
      margin-left: 12px; }
    #character-modal .character-info .character-badge-mobile {
      display: none; }
    #character-modal .character-info .character-name {
      font-size: 30px;
      font-weight: 500;
      line-height: 37px;
      margin-bottom: 35px;
      display: flex;
      margin-left: -37px; }
      #character-modal .character-info .character-name .character-badge {
        margin-right: 8px;
        width: 40px;
        height: 40px; }
    #character-modal .character-info .character-description {
      font-size: 14px;
      font-weight: 300;
      line-height: 24px;
      max-height: 100px;
      overflow-y: scroll;
      padding-right: 20px;
      width: 269px; }
  #character-modal .character-main-img {
    width: 79.16vw;
    max-width: 1140px;
    margin: 9.4vh auto 0px auto; }
  @media screen and (min-width: 1024px) {
    #character-modal .metal-btn {
      position: absolute;
      left: calc(11vw + 80px);
      top: calc(48.1vh + 247px + 16px);
      bottom: initial;
      z-index: 0; } }
  @media screen and (min-width: 1441px) {
    #character-modal .character-modal-arrow {
      left: 25vw;
      top: 6vw; }
    #character-modal .character-info {
      left: 17vw; }
    #character-modal .metal-btn {
      left: calc(17vw + 80px); } }
  @media screen and (max-width: 767px) {
    #character-modal {
      height: 100vh; }
      #character-modal .character-modal-arrow {
        left: initial;
        right: calc(10vw - 10px);
        top: 228px;
        padding: 10px; }
        #character-modal .character-modal-arrow .svg-desktop {
          display: none; }
        #character-modal .character-modal-arrow .svg-mobile {
          display: initial; }
      #character-modal .character-info {
        position: static;
        display: flex;
        width: calc(100vw - 10px);
        padding: 72px 10px 18.5px 0px;
        height: calc(211px - 72px - 18.5px);
        background-image: url("../img/index-page/character/character-info-bg-mobile.png");
        background-size: cover;
        background-position: bottom; }
        #character-modal .character-info .character-category {
          font-size: 10px;
          margin-left: 0px;
          line-height: 10px; }
        #character-modal .character-info .character-badge-mobile {
          margin: 28px 34px auto 40px;
          width: 49px;
          height: 49px;
          display: inline-block; }
        #character-modal .character-info .character-info-text-wrapper {
          max-width: 284px;
          height: 118px;
          padding-left: 22.8px;
          border-left: 1px solid rgba(59, 59, 59, 0.5);
          overflow-y: hidden; }
        #character-modal .character-info .character-name {
          margin-left: 0px;
          font-size: 18px;
          line-height: 25px;
          font-weight: 500;
          margin-bottom: 1.5vw; }
          #character-modal .character-info .character-name .character-badge {
            display: none; }
        #character-modal .character-info .character-description {
          max-height: 57px;
          font-size: 13px;
          line-height: 19px;
          color: #969696;
          padding-right: 10px;
          width: auto; }
      #character-modal .character-main-img {
        width: 100vw;
        margin-top: 28.5px;
        margin-bottom: -10px; }
      #character-modal .metal-btn {
        position: relative; } }
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    #character-modal {
      top: 0px;
      padding-top: 180px;
      height: 100vh; }
      #character-modal .character-modal-arrow {
        left: 100px;
        top: 220px; }
      #character-modal .character-main-img {
        width: 90vw;
        margin-top: 9vh; }
      #character-modal .character-info {
        height: auto;
        width: 24.5vw;
        left: 4.5vw;
        top: 466px;
        padding-left: 8vw; }
        #character-modal .character-info .character-name {
          font-size: 24px; }
        #character-modal .character-info .character-description {
          max-height: 75px;
          width: 24vw; }
      #character-modal .metal-btn {
        position: absolute;
        left: 12vw;
        top: calc(466px + 210px + 16px);
        bottom: initial;
        z-index: 0; } }