*,
      :after,
      :before {
        box-sizing: border-box;
        border: 0 solid #eee
      }

      :after,
      :before {
        --tw-content: ""
      }

      html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        font-family: Roboto, sans-serif
      }

      body {
        line-height: inherit
      }

      h1,
      h2,
      h3 {
        font-size: inherit;
        font-weight: inherit
      }

      a {
        color: inherit;
        text-decoration: inherit
      }

      button,
      input {
        font-family: inherit;
        font-size: 100%;
        line-height: inherit;
        color: inherit;
        margin: 0;
        padding: 0
      }

      button {
        text-transform: none
      }

      button {
        -webkit-appearance: button;
        background-color: transparent;
        background-image: none
      }

      h1,
      h2,
      h3,
      p {
        margin: 0
      }

      input::-moz-placeholder {
        opacity: 1;
        color: #bdbdbd
      }

      input::placeholder {
        opacity: 1;
        color: #bdbdbd
      }

      button {
        cursor: pointer
      }

      img,
      svg {
        display: block;
        vertical-align: middle
      }

      img {
        max-width: 100%;
        height: auto
      }

      :root,
      [data-theme] {
        background-color: hsla(var(--b1)/var(--tw-bg-opacity, 1));
        color: hsla(var(--bc)/var(--tw-text-opacity, 1))
      }

      html {
        -webkit-tap-highlight-color: transparent
      }

      :root {
        --p: 183 47% 59%;
        --pf: 183 47% 47%;
        --sf: 338 71% 62%;
        --af: 39 84% 46%;
        --nf: 280 46% 11%;
        --in: 198 93% 60%;
        --su: 158 64% 52%;
        --wa: 43 96% 56%;
        --er: 0 91% 71%;
        --pc: 183 100% 12%;
        --sc: 338 100% 16%;
        --ac: 39 100% 12%;
        --nc: 280 83% 83%;
        --inc: 198 100% 12%;
        --suc: 158 100% 10%;
        --wac: 43 100% 11%;
        --erc: 0 100% 14%;
        --rounded-box: 1rem;
        --rounded-badge: 1.9rem;
        --animation-btn: 0.25s;
        --animation-input: .2s;
        --btn-text-case: uppercase;
        --btn-focus-scale: 0.95;
        --border-btn: 1px;
        --s: 338 71% 78%;
        --a: 39 84% 58%;
        --n: 280 46% 14%;
        --b1: 24 33% 97%;
        --b2: 27 22% 92%;
        --b3: 22 14% 89%;
        --bc: 280 46% 14%;
        --rounded-btn: 1.9rem;
        --tab-border: 2px;
        --tab-radius: .5rem
      }

      *,
      :after,
      :before {
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(33, 150, 243, .5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia:
      }

      .card {
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border-radius: .75rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)
      }

      .card .card-body {
        padding: 1.5rem;
        flex: 1 1 auto
      }

      label {
        font-size: .875rem;
        font-weight: 400;
        margin-bottom: .5rem;
        color: #607d8b;
        margin-left: 0;
        transition: all .2s ease
      }

      * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
      }

      h1,
      h2,
      h3 {
        font-weight: 400;
        letter-spacing: -.05rem;
        margin-bottom: .5rem;
        color: #212121
      }

      a {
        color: #212121
      }

      h1 {
        font-size: 3rem;
        line-height: 1.25
      }

      h2 {
        font-size: 2.25rem;
        line-height: 1.3
      }

      h3 {
        font-size: 1.875rem;
        line-height: 1.375
      }

      p {
        line-height: 1.625
      }

      p {
        font-weight: 300
      }

      .btn {
        align-items: center;
        justify-content: center
      }

      .btn {
        display: inline-flex;
        flex-shrink: 0;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        flex-wrap: wrap;
        border-color: transparent;
        border-color: hsl(var(--n)/var(--tw-border-opacity));
        text-align: center;
        transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        border-radius: var(--rounded-btn, .5rem);
        height: 3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: .875rem;
        line-height: 1.25rem;
        line-height: 1em;
        min-height: 3rem;
        font-weight: 600;
        text-transform: uppercase;
        text-transform: var(--btn-text-case, uppercase);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        border-width: var(--border-btn, 1px);
        animation: button-pop var(--animation-btn, .25s) ease-out;
        --tw-border-opacity: 1;
        --tw-bg-opacity: 1;
        background-color: hsl(var(--n)/var(--tw-bg-opacity));
        --tw-text-opacity: 1;
        color: hsl(var(--nc)/var(--tw-text-opacity))
      }

      .card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--rounded-box, 1rem)
      }

      .card:focus {
        outline: 2px solid transparent;
        outline-offset: 2px
      }

      .card-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        padding: var(--padding-card, 2rem);
        gap: .5rem
      }

      .card-body :where(p) {
        flex-grow: 1
      }

      .card-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .5rem
      }

      .collapse {
        position: relative;
        display: grid;
        overflow: hidden
      }

      .collapse-content,
      .collapse-title {
        grid-column-start: 1;
        grid-row-start: 1
      }

      .collapse-content {
        grid-row-start: 2;
        overflow: hidden;
        max-height: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        cursor: unset;
        transition: padding .2s ease-in-out, background-color .2s ease-in-out
      }

      .collapse:focus:not(.collapse-close) .collapse-content {
        max-height: 9000px
      }

      .btn:active:focus,
      .btn:active:hover {
        animation: none;
        transform: scale(var(--btn-focus-scale, .95))
      }

      .btn:hover {
        --tw-border-opacity: 1;
        border-color: hsl(var(--nf, var(--n))/var(--tw-border-opacity));
        --tw-bg-opacity: 1;
        background-color: hsl(var(--nf, var(--n))/var(--tw-bg-opacity))
      }

      .btn:focus-visible {
        outline: 2px solid hsl(var(--nf));
        outline-offset: 2px
      }

      @keyframes button-pop {
        0% {
          transform: scale(var(--btn-focus-scale, .95))
        }

        40% {
          transform: scale(1.02)
        }

        to {
          transform: scale(1)
        }
      }

      .card:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px
      }

      .collapse:focus-visible {
        outline: 2px solid hsl(var(--nf));
        outline-offset: 2px
      }

      .collapse-arrow .collapse-title:after {
        transition-duration: .15s;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        top: 1.4rem;
        content: "";
        transform-origin: 75% 75%;
        transform: rotate(45deg);
        box-shadow: 2px 2px
      }

      .collapse-arrow .collapse-title:after {
        position: absolute;
        display: block;
        height: .5rem;
        width: .5rem;
        transition-property: all;
        right: 1.4rem;
        pointer-events: none
      }

      .collapse:not(.collapse-open):not(.collapse-close) .collapse-title {
        cursor: pointer
      }

      .collapse:focus:not(.collapse-open):not(.collapse-close) .collapse-title {
        cursor: unset
      }

      .collapse-title {
        width: 100%;
        padding: 1rem 3rem 1rem 1rem;
        min-height: 3.75rem;
        transition: background-color .2s ease-in-out
      }

      .collapse:focus:not(.collapse-close) :where(.collapse-content) {
        padding-bottom: 1rem;
        transition: padding .2s ease-in-out, background-color .2s ease-in-out
      }

      .collapse-arrow:focus:not(.collapse-close) .collapse-title:after {
        transform: rotate(225deg)
      }

      html {
        --tw-bg-opacity: 1;
        background-color: rgb(27 94 32/var(--tw-bg-opacity))
      }

      :root {
        --fullscreen-height: 100vh
      }

      @supports (min-height:-webkit-fill-available) {
        --fullscreen-height: -webkit-fill-available
      }

      @supports (height:100dvh) {
        --fullscreen-height: 100svh
      }

      #game-description h1 {
        margin-bottom: .5rem;
        font-family: Torus, sans-serif, system-ui, -apple-system;
        font-size: 1.5rem;
        line-height: 2rem
      }

      #game-description p {
        word-break: break-word
      }

      #game-description h3 {
        font-family: Torus, sans-serif, system-ui, -apple-system;
        line-height: 1.75rem
      }

      #game-description h3 {
        margin-top: 1rem;
        margin-bottom: 1rem;
        font-size: 1.125rem
      }

      #game-description p {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        font-family: Proxima Nova, sans-serif, system-ui, -apple-system;
        font-size: 1rem;
        line-height: 1.5rem
      }

      #game-description a:not(.nav-link) {
        --tw-text-opacity: 1;
        color: rgb(21 101 192/var(--tw-text-opacity));
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline
      }

      @media screen and (max-height:425px) {
        #game-card-bottom {
          display: none
        }
      }

      @media screen and (orientation:landscape) {
        #game-reminder-HorizontalScreen {
          display: none
        }
      }

      #game-reminder-HorizontalScreen {
        animation: cssHiddenAnimation 0s ease-in 5s forwards;
        animation-fill-mode: forwards
      }

      @keyframes cssHiddenAnimation {
        to {
          width: 0;
          height: 0;
          overflow: hidden;
          display: none
        }
      }

      @media screen and (max-height:700px) {
        #share-info-wrapper {
          height: 100%
        }
      }

      @media screen and (min-height:700px) {
        #share-info-wrapper {
          height: calc(100% - 64px)
        }
      }

      .game-icon-a {
        position: relative;
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .game-icon-a,
      .game-icon-img {
        width: 100%;
        border-radius: 1rem
      }

      .game-icon-img {
        height: 100%;
        overflow: clip;
        -o-object-fit: cover;
        object-fit: cover
      }

      .game-icon-h3 {
        position: absolute;
        bottom: 0;
        margin-bottom: -.5rem;
        width: 100%;
        overflow: hidden;
        overflow: clip;
        word-break: break-all;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        --tw-bg-opacity: 0.3;
        padding-bottom: .25rem;
        padding-top: .75rem;
        text-align: center;
        vertical-align: text-bottom;
        font-size: .75rem;
        line-height: 1rem;
        font-weight: 700;
        --tw-text-opacity: 1;
        color: hsl(var(--b1)/var(--tw-text-opacity));
        opacity: 0;
        transition-property: all;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .5s
      }

      @media screen and (max-width:1024px) {
        .group:hover .game-icon-h3 {
          --tw-translate-y: -0.5rem;
          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
          background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
          --tw-gradient-from: transparent;
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
          --tw-gradient-to: hsl(var(--bc)/0.7);
          opacity: 1
        }
      }

      @media screen and (min-width:1024px) {
        .game-icon-a:hover {
          z-index: 10;
          --tw-translate-y: -0.25rem;
          --tw-scale-x: 1.1;
          --tw-scale-y: 1.1;
          --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
          --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          transition-property: all;
          transition-timing-function: cubic-bezier(.4, 0, .2, 1);
          transition-duration: .3s
        }

        .game-icon-a:hover,
        .group:hover .game-icon-h3 {
          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .group:hover .game-icon-h3 {
          --tw-translate-y: -0.5rem;
          background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
          --tw-gradient-from: transparent;
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
          --tw-gradient-to: hsl(var(--bc)/0.7);
          opacity: 1
        }
      }

      :root {
        --cellSize: 94px;
        --cellSpacing: 16px
      }

      .grid-container {
        grid-gap: var(--cellSpacing);
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-auto-flow: row dense;
        align-content: center;
        align-items: center;
        justify-content: center
      }

      @media only screen and (max-width:989px) {

        .grid-container .game-container #game-card,
        .grid-container .game-container #play-game-cover-pc {
          display: none
        }
      }

      @media only screen and (min-width:990px) {
        .grid-container .game-container #play-game-cover {
          display: none
        }

        .grid-container .game-container #play-game-cover-pc {
          display: flex
        }
      }

      @media (min-width:0px) and (max-width:550px) {
        .grid-container {
          grid-template-columns: repeat(3, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 3/span 3;
          grid-column-start: 1;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 1;
          grid-row: span 3/span 3;
          grid-row-start: 5;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-300x250-wrapper-unfixed {
          grid-column: span 3/span 3;
          grid-row: span 3/span 3;
          flex-direction: column;
          display: flex
        }

        #game-description {
          grid-row-start: 8
        }
      }

      @media (min-width:550px) and (max-width:660px) {
        .grid-container {
          grid-template-columns: repeat(4, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 3/span 3;
          grid-column-start: 1;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 1;
          grid-row: span 3/span 3;
          grid-row-start: 4;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-300x250-wrapper-unfixed {
          grid-column: span 3/span 3;
          grid-row: span 3/span 3;
          flex-direction: column;
          display: flex
        }
      }

      @media only screen and (min-width:660px) and (max-width:770px) {
        .grid-container {
          grid-template-columns: repeat(5, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 3/span 3;
          grid-column-start: 2;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 2;
          grid-row: span 3/span 3;
          grid-row-start: 4;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-300x250-wrapper-unfixed {
          grid-column: span 3/span 3;
          grid-row: span 3/span 3;
          flex-direction: column;
          display: flex
        }
      }

      @media only screen and (min-width:770px) and (max-width:880px) {
        .grid-container {
          grid-template-columns: repeat(6, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 3/span 3;
          grid-column-start: 2;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 2;
          grid-row: span 3/span 3;
          grid-row-start: 4;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-300x250-wrapper-unfixed {
          grid-column: span 3/span 3;
          grid-row: span 3/span 3;
          flex-direction: column;
          display: flex
        }
      }

      @media only screen and (min-width:880px) and (max-width:990px) {
        .grid-container {
          grid-template-columns: repeat(7, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 3/span 3;
          grid-column-start: 3;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 1;
          grid-row: span 1/span 1;
          grid-row-start: 4;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 7
        }
      }

      @media only screen and (min-width:990px) and (max-width:1100px) {
        .grid-container {
          grid-template-columns: repeat(9, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 6/span 6;
          grid-column-start: 2;
          grid-row: span 4/span 4;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 2;
          grid-row: span 1/span 1;
          grid-row-start: 5;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 7
        }
      }

      @media only screen and (min-width:1100px) and (max-width:1210px) {
        .grid-container {
          grid-template-columns: repeat(10, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 8/span 8;
          grid-column-start: 2;
          grid-row: span 5/span 5;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 3;
          grid-row: span 1/span 1;
          grid-row-start: 6;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 8
        }
      }

      @media only screen and (min-width:1210px) and (max-width:1320px) {
        .grid-container {
          grid-template-columns: repeat(11, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 8/span 8;
          grid-column-start: 2;
          grid-row: span 5/span 5;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 3;
          grid-row: span 1/span 1;
          grid-row-start: 6;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 8
        }
      }

      @media only screen and (min-width:1320px) {
        .grid-container {
          grid-template-columns: repeat(12, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 8/span 8;
          grid-column-start: 2;
          grid-row: span 5/span 5;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 10;
          grid-row: span 3/span 3;
          grid-row-start: 1;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 3;
          grid-row: span 1/span 1;
          grid-row-start: 6;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 8
        }
      }

      .fixed {
        position: fixed
      }

      .absolute {
        position: absolute
      }

      .relative {
        position: relative
      }

      .sticky {
        position: sticky
      }

      .inset-0 {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
      }

      .top-2 {
        top: .5rem
      }

      .-left-1\.5 {
        left: -.375rem
      }

      .-left-1 {
        left: -.25rem
      }

      .bottom-0 {
        bottom: 0
      }

      .top-1\/2 {
        top: 50%
      }

      .left-1\/2 {
        left: 50%
      }

      .right-2 {
        right: .5rem
      }

      .top-0 {
        top: 0
      }

      .left-0 {
        left: 0
      }

      .right-0 {
        right: 0
      }

      .top-48 {
        top: 12rem
      }

      .top-72 {
        top: 18rem
      }

      .top-1\/3 {
        top: 33.333333%
      }

      .z-20 {
        z-index: 20
      }

      .z-10 {
        z-index: 10
      }

      .z-\[11\] {
        z-index: 11
      }

      .-z-10 {
        z-index: -10
      }

      .col-span-3 {
        grid-column: span 3/span 3
      }

      .col-span-2 {
        grid-column: span 2/span 2
      }

      .col-span-full {
        grid-column: 1/-1
      }

      .row-span-2 {
        grid-row: span 2/span 2
      }

      .row-span-3 {
        grid-row: span 3/span 3
      }

      .m-1 {
        margin: .25rem
      }

      .m-auto {
        margin: auto
      }

      .m-3 {
        margin: .75rem
      }

      .mx-auto {
        margin-left: auto;
        margin-right: auto
      }

      .my-auto {
        margin-top: auto;
        margin-bottom: auto
      }

      .mt-auto {
        margin-top: auto
      }

      .ml-3 {
        margin-left: .75rem
      }

      .ml-4 {
        margin-left: 1rem
      }

      .-mr-8 {
        margin-right: -2rem
      }

      .-mt-4 {
        margin-top: -1rem
      }

      .mr-2 {
        margin-right: .5rem
      }

      .block {
        display: block
      }

      .inline-flex {
        display: inline-flex
      }

      .grid {
        display: grid
      }

      .inline-grid {
        display: inline-grid
      }

      .contents {
        display: contents
      }

      .hidden {
        display: none
      }

      .h-8 {
        height: 2rem
      }

      .h-7 {
        height: 1.75rem
      }

      .h-\[40px\] {
        height: 40px
      }

      .h-\[204px\] {
        height: 204px
      }

      .h-full {
        height: 100%
      }

      .h-0 {
        height: 0
      }

      .h-12 {
        height: 3rem
      }

      .h-\[94px\] {
        height: 94px
      }

      .h-6 {
        height: 1.5rem
      }

      .h-10 {
        height: 2.5rem
      }

      .h-11 {
        height: 2.75rem
      }

      .h-16 {
        height: 4rem
      }

      .h-\[314px\] {
        height: 314px
      }

      .h-\[250px\] {
        height: 250px
      }

      .h-\[90px\] {
        height: 90px
      }

      .h-screen {
        height: 100vh
      }

      .h-9 {
        height: 2.25rem
      }

      .w-12 {
        width: 3rem
      }

      .w-20 {
        width: 5rem
      }

      .w-\[26px\] {
        width: 26px
      }

      .w-5 {
        width: 1.25rem
      }

      .w-\[314px\] {
        width: 314px
      }

      .w-full {
        width: 100%
      }

      .w-8 {
        width: 2rem
      }

      .w-6 {
        width: 1.5rem
      }

      .w-11 {
        width: 2.75rem
      }

      .w-10 {
        width: 2.5rem
      }

      .w-80 {
        width: 20rem
      }

      .w-\[300px\] {
        width: 300px
      }

      .w-\[728px\] {
        width: 728px
      }

      .w-96 {
        width: 24rem
      }

      .w-auto {
        width: auto
      }

      .w-9 {
        width: 2.25rem
      }

      .flex-1 {
        flex: 1 1 0%
      }

      .flex-none {
        flex: none
      }

      .translate-x-\[-50\%\] {
        --tw-translate-x: -50%
      }

      .translate-x-\[-50\%\],
      .translate-y-\[-50\%\] {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .translate-y-\[-50\%\] {
        --tw-translate-y: -50%
      }

      .rotate-90 {
        --tw-rotate: 90deg
      }

      .rotate-90 {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .scale-125 {
        --tw-scale-x: 1.25;
        --tw-scale-y: 1.25
      }

      .scale-125 {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      @keyframes bounce {

        0%,
        to {
          transform: translateY(-25%);
          animation-timing-function: cubic-bezier(.8, 0, 1, 1)
        }

        50% {
          transform: none;
          animation-timing-function: cubic-bezier(0, 0, .2, 1)
        }
      }

      .animate-bounce {
        animation: bounce 1s infinite
      }

      .cursor-pointer {
        cursor: pointer
      }

      .grid-flow-row-dense {
        grid-auto-flow: row dense
      }

      .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
      }

      .grid-rows-3 {
        grid-template-rows: repeat(3, minmax(0, 1fr))
      }

      .flex-row {
        flex-direction: row
      }

      .flex-col {
        flex-direction: column
      }

      .items-center {
        align-items: center
      }

      .justify-center {
        justify-content: center
      }

      .justify-between {
        justify-content: space-between
      }

      .gap-4 {
        gap: 1rem
      }

      .gap-1 {
        gap: .25rem
      }

      .gap-2 {
        gap: .5rem
      }

      .gap-0 {
        gap: 0
      }

      .self-center {
        align-self: center
      }

      .overflow-hidden {
        overflow: hidden
      }

      .overflow-clip {
        overflow: clip
      }

      .overscroll-y-none {
        overscroll-behavior-y: none
      }

      .overscroll-x-none {
        overscroll-behavior-x: none
      }

      .rounded-2xl {
        border-radius: 1rem
      }

      .rounded-xl {
        border-radius: .75rem
      }

      .rounded-full {
        border-radius: 9999px
      }

      .rounded-3xl {
        border-radius: 1.5rem
      }

      .rounded-t-2xl {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem
      }

      .rounded-l {
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem
      }

      .rounded-b-2xl {
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem
      }

      .border-t {
        border-top-width: 1px
      }

      .border-b {
        border-bottom-width: 1px
      }

      .border-none {
        border-style: none
      }

      .border-gray-400 {
        --tw-border-opacity: 1;
        border-color: rgb(189 189 189/var(--tw-border-opacity))
      }

      .bg-base-100 {
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b1)/var(--tw-bg-opacity))
      }

      .bg-white {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity))
      }

      .bg-blue-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(144 202 249/var(--tw-bg-opacity))
      }

      .bg-gray-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(224 224 224/var(--tw-bg-opacity))
      }

      .bg-green-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(165 214 167/var(--tw-bg-opacity))
      }

      .bg-gray-400 {
        --tw-bg-opacity: 1;
        background-color: rgb(189 189 189/var(--tw-bg-opacity))
      }

      .bg-gray-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(117 117 117/var(--tw-bg-opacity))
      }

      .bg-light-green-100 {
        --tw-bg-opacity: 1;
        background-color: rgb(220 237 200/var(--tw-bg-opacity))
      }

      .bg-gray-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(238 238 238/var(--tw-bg-opacity))
      }

      .bg-green-100 {
        --tw-bg-opacity: 1;
        background-color: rgb(200 230 201/var(--tw-bg-opacity))
      }

      .bg-green-700 {
        --tw-bg-opacity: 1;
        background-color: rgb(56 142 60/var(--tw-bg-opacity))
      }

      .bg-green-500 {
        --tw-bg-opacity: 1;
        background-color: rgb(76 175 80/var(--tw-bg-opacity))
      }

      .bg-green-800 {
        --tw-bg-opacity: 1;
        background-color: rgb(46 125 50/var(--tw-bg-opacity))
      }

      .bg-\[\#bcff01\] {
        --tw-bg-opacity: 1;
        background-color: rgb(188 255 1/var(--tw-bg-opacity))
      }

      .bg-light-green-50 {
        --tw-bg-opacity: 1;
        background-color: rgb(241 248 233/var(--tw-bg-opacity))
      }

      .bg-inherit {
        background-color: inherit
      }

      .bg-green-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(129 199 132/var(--tw-bg-opacity))
      }

      .bg-opacity-75 {
        --tw-bg-opacity: 0.75
      }

      .bg-opacity-30 {
        --tw-bg-opacity: 0.3
      }

      .bg-opacity-50 {
        --tw-bg-opacity: 0.5
      }

      .bg-opacity-80 {
        --tw-bg-opacity: 0.8
      }

      .bg-opacity-40 {
        --tw-bg-opacity: 0.4
      }

      .bg-opacity-10 {
        --tw-bg-opacity: 0.1
      }

      .bg-gradient-to-b {
        background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
      }

      .from-transparent {
        --tw-gradient-from: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent)
      }

      .to-gray-900 {
        --tw-gradient-to: #212121
      }

      .bg-cover {
        background-size: cover
      }

      .fill-current {
        fill: currentColor
      }

      .fill-blue-500 {
        fill: #2196f3
      }

      .fill-white {
        fill: #fff
      }

      .fill-black {
        fill: #000
      }

      .fill-green-900 {
        fill: #1b5e20
      }

      .fill-green-800 {
        fill: #2e7d32
      }

      .object-cover {
        -o-object-fit: cover;
        object-fit: cover
      }

      .object-right {
        -o-object-position: right;
        object-position: right
      }

      .p-1 {
        padding: .25rem
      }

      .p-2 {
        padding: .5rem
      }

      .p-4 {
        padding: 1rem
      }

      .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
      }

      .px-4 {
        padding-left: 1rem;
        padding-right: 1rem
      }

      .py-2 {
        padding-top: .5rem;
        padding-bottom: .5rem
      }

      .px-2 {
        padding-left: .5rem;
        padding-right: .5rem
      }

      .py-1 {
        padding-top: .25rem;
        padding-bottom: .25rem
      }

      .px-1 {
        padding-left: .25rem;
        padding-right: .25rem
      }

      .px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
      }

      .py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
      }

      .py-0\.5 {
        padding-top: .125rem;
        padding-bottom: .125rem
      }

      .pl-1 {
        padding-left: .25rem
      }

      .pl-4 {
        padding-left: 1rem
      }

      .pr-4 {
        padding-right: 1rem
      }

      .text-left {
        text-align: left
      }

      .text-center {
        text-align: center
      }

      .align-top {
        vertical-align: top
      }

      .align-bottom {
        vertical-align: bottom
      }

      .align-text-bottom {
        vertical-align: text-bottom
      }

      .font-torus {
        font-family: Torus, sans-serif, system-ui, -apple-system
      }

      .font-sans {
        font-family: Roboto, sans-serif
      }

      .text-xl {
        font-size: 1.25rem
      }

      .text-lg,
      .text-xl {
        line-height: 1.75rem
      }

      .text-lg {
        font-size: 1.125rem
      }

      .text-xs {
        font-size: .75rem;
        line-height: 1rem
      }

      .text-sm {
        font-size: .875rem;
        line-height: 1.25rem
      }

      .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
      }

      .font-bold {
        font-weight: 700
      }

      .font-medium {
        font-weight: 500
      }

      .font-extrabold {
        font-weight: 800
      }

      .font-semibold {
        font-weight: 600
      }

      .text-base-content {
        --tw-text-opacity: 1;
        color: hsl(var(--bc)/var(--tw-text-opacity))
      }

      .text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
      }

      .text-black {
        --tw-text-opacity: 1;
        color: rgb(0 0 0/var(--tw-text-opacity))
      }

      .text-\[\#4594d5\] {
        --tw-text-opacity: 1;
        color: rgb(69 148 213/var(--tw-text-opacity))
      }

      .text-gray-500 {
        --tw-text-opacity: 1;
        color: rgb(158 158 158/var(--tw-text-opacity))
      }

      .text-\[\#4f66a5\] {
        --tw-text-opacity: 1;
        color: rgb(79 102 165/var(--tw-text-opacity))
      }

      .text-\[\#4a9ae9\] {
        --tw-text-opacity: 1;
        color: rgb(74 154 233/var(--tw-text-opacity))
      }

      .text-\[\#d32d30\] {
        --tw-text-opacity: 1;
        color: rgb(211 45 48/var(--tw-text-opacity))
      }

      .text-\[\#469b2e\] {
        --tw-text-opacity: 1;
        color: rgb(70 155 46/var(--tw-text-opacity))
      }

      .text-\[\#468cc9\] {
        --tw-text-opacity: 1;
        color: rgb(70 140 201/var(--tw-text-opacity))
      }

      .text-opacity-50 {
        --tw-text-opacity: 0.5
      }

      .no-underline {
        -webkit-text-decoration-line: none;
        text-decoration-line: none
      }

      .placeholder-green-800::-moz-placeholder {
        --tw-placeholder-opacity: 1;
        color: rgb(46 125 50/var(--tw-placeholder-opacity))
      }

      .placeholder-green-800::placeholder {
        --tw-placeholder-opacity: 1;
        color: rgb(46 125 50/var(--tw-placeholder-opacity))
      }

      .shadow-xl {
        --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)
      }

      .shadow-2xl,
      .shadow-xl {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
        --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color)
      }

      .shadow-inner {
        --tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .05);
        --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color)
      }

      .shadow-inner {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .shadow-sm {
        --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
      }

      .shadow-sm {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .ring-2 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
      }

      .ring-gray-500 {
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(158 158 158/var(--tw-ring-opacity))
      }

      .backdrop-blur {
        --tw-backdrop-blur: blur(8px)
      }

      .backdrop-blur {
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
      }

      .backdrop-saturate-150 {
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
      }

      .backdrop-saturate-150 {
        --tw-backdrop-saturate: saturate(1.5)
      }

      .backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
      }

      .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .15s
      }

      .transition {
        transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .15s
      }

      .duration-500 {
        transition-duration: .5s
      }

      .duration-300 {
        transition-duration: .3s
      }

      body {
        font-family: Proxima Nova, sans-serif, system-ui, -apple-system
      }

      @media only screen and (min-width:768px) {
        .plr120 {
          padding-left: 120px;
          padding-right: 120px
        }
      }

      @media (min-width:600px) and (max-width:1400px) {
        .plr120 {
          padding-left: 30px;
          padding-right: 30px
        }

        .banner {
          font-size: 12px
        }
      }

      a,
      a:active,
      a:hover,
      a:link,
      a:visited {
        text-decoration: none
      }

      body {
        margin: 0
      }

      .flex {
        display: flex
      }

      .banner {
        background: #bcff01;
        color: #000;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center
      }

      body,
      html {
        width: 100% !important
      }

      .hover\:scale-125:hover {
        --tw-scale-x: 1.25;
        --tw-scale-y: 1.25
      }

      .hover\:scale-110:hover,
      .hover\:scale-125:hover {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .hover\:scale-110:hover {
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1
      }

      .hover\:cursor-pointer:hover {
        cursor: pointer
      }

      .hover\:bg-inherit:hover {
        background-color: inherit
      }

      .hover\:text-blue-500:hover {
        --tw-text-opacity: 1;
        color: rgb(33 150 243/var(--tw-text-opacity))
      }

      .hover\:ring-blue-500:hover {
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(33 150 243/var(--tw-ring-opacity))
      }

      .hover\:brightness-125:hover {
        --tw-brightness: brightness(1.25);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
      }

      .group:hover .group-hover\:h-\[204px\] {
        height: 204px
      }

      .group:hover .group-hover\:animate-none {
        animation: none
      }

      @media (min-width:540px) {
        .sm\:mx-1 {
          margin-left: .25rem;
          margin-right: .25rem
        }

        .sm\:block {
          display: block
        }

        .sm\:px-4 {
          padding-left: 1rem;
          padding-right: 1rem
        }

        .sm\:text-xl {
          font-size: 1.25rem;
          line-height: 1.75rem
        }
      }

      @media (min-width:720px) {
        .md\:mx-4 {
          margin-left: 1rem;
          margin-right: 1rem
        }

        .md\:block {
          display: block
        }

        .md\:hidden {
          display: none
        }

        .md\:flex-1 {
          flex: 1 1 0%
        }

        .md\:flex-none {
          flex: none
        }

        .md\:p-16 {
          padding: 4rem
        }

        .md\:text-sm {
          font-size: .875rem;
          line-height: 1.25rem
        }
      }

      @media (min-width:960px) {
        .lg\:absolute {
          position: absolute
        }

        .lg\:top-1\/2 {
          top: 50%
        }

        .lg\:left-1\/2 {
          left: 50%
        }

        .lg\:-translate-x-1\/2 {
          --tw-translate-x: -50%
        }

        .lg\:-translate-x-1\/2,
        .lg\:-translate-y-1\/2 {
          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .lg\:-translate-y-1\/2 {
          --tw-translate-y: -50%
        }
      }

      @media (min-width:1140px) {
        .xl\:block {
          display: block
        }
      }

      .Footer_footer__nKPS_ {
        background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
        --tw-gradient-from: #388e3c;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(56, 142, 60, 0));
        --tw-gradient-to: #2e7d32
      }

      .Footer_footer__nKPS_,
      .Footer_footer__nKPS_ a {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
      }

      .Footer_center__B1_Q3 {
        color: #303443;
        padding: 20px 120px;
        display: flex;
        justify-content: space-evenly
      }

      .Footer_center_title__jne0s {
        --tw-border-opacity: 1;
        border-color: rgb(255 255 255/var(--tw-border-opacity));
        font-family: Torus, sans-serif, system-ui, -apple-system;
        font-weight: 600;
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity));
        border-bottom: 2px solid;
        height: 35px;
        width: 130px;
        margin-bottom: 10px
      }

      .Footer_center_desc__Qd_TG {
        color: #303443;
        font-size: 14px;
        height: 25px;
        line-height: 25px
      }

      .Footer_bottom__Ky4Vs {
        --tw-bg-opacity: 1;
        background-color: rgb(46 125 50/var(--tw-bg-opacity));
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity));
        height: 70px;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center
      }

      .NewCard_card__Du2gw {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        background: #fff;
        border-width: 0
      }

      @media (min-width:720px) {
        .NewCard_card__Du2gw {
          border-width: 1px
        }
      }

      .NewCard_cardContent__swLX0 {
        width: 100%;
        min-height: 685px
      }

      .MobilePlayGameLoading_loadingGameWrapper__zFjXI {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: auto;
        z-index: 10001;
        left: 0;
        top: 0;
        padding: 2px;
        background-color: #fff
      }

      .MobilePlayGameLoading_loadingGameLogoWrapper__psi8g {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 45px
      }

      .MobilePlayGameLoading_gameInfoWrapper__zD2fD {
        padding: 10px
      }

      .MobilePlayGameLoading_gameLogo__tjCYx {
        display: inline-block;
        vertical-align: top;
        width: 64px;
        height: 64px;
        border-radius: 8px;
        border: 1px solid #000;
        margin-right: 10px
      }

      .MobilePlayGameLoading_gameInfoTop__soPiI {
        display: inline-block;
        width: calc(100% - 74px);
        vertical-align: top;
        min-height: 64px;
        font-size: 14px;
        padding-top: 10px
      }

      .MobilePlayGameLoading_gameInfoDesc__Avpfu {
        margin-top: 10px
      }

      .MobilePlayGameLoading_loadingBarWrapper__GBuWq {
        position: relative;
        margin-top: 10px;
        width: 100%;
        height: 32px;
        background-color: rgba(0, 0, 0, .25);
        border-radius: 8px;
        border: 1px solid #000
      }

      .MobilePlayGameLoading_loadingBar__JZrsF {
        height: 100%;
        background-color: #bcff01;
        border-radius: 8px
      }

      .MobilePlayGameLoading_loadingBarDesc__c30Im {
        position: absolute;
        height: 32px;
        top: 0;
        display: flex;
        align-items: center;
        width: 120px;
        left: calc(50% - 60px)
      }

      .PCIframe_playNow__ECfqy {
        background: #bcff01;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 120px;
        height: 40px;
        border: 2px solid #000;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        transform: translate(-50%, -50%);
        z-index: 10
      }

      #GameSection_fire-label-wrapper__0xa8G:before {
        content: "";
        background: #fff;
        width: 4px;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: -4px;
        z-index: 0
      }

      #GameSection_fire-label-wrapper__0xa8G:after {
        content: "";
        background: #bac9de;
        width: 6px;
        height: 8px;
        border-radius: 4px 0 0 4px;
        position: absolute;
        left: 0;
        z-index: 1
      }

      :root {
        --swiper-theme-color: #007aff
      }

      .swiper {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1
      }

      .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: content-box
      }

      .swiper-wrapper {
        transform: translateZ(0)
      }
    
    
      /*
        ! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
        */
      *,
      :after,
      :before {
        box-sizing: border-box;
        border: 0 solid #eee
      }

      :after,
      :before {
        --tw-content: ""
      }

      html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        font-family: Roboto, sans-serif
      }

      body {
        line-height: inherit
      }

      hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
      }

      abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: inherit;
        font-weight: inherit
      }

      a {
        color: inherit;
        text-decoration: inherit
      }

      b,
      strong {
        font-weight: bolder
      }

      code,
      kbd,
      pre,
      samp {
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
        font-size: 1em
      }

      small {
        font-size: 80%
      }

      sub,
      sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline
      }

      sub {
        bottom: -.25em
      }

      sup {
        top: -.5em
      }

      table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
      }

      button,
      input,
      optgroup,
      select,
      textarea {
        font-family: inherit;
        font-size: 100%;
        line-height: inherit;
        color: inherit;
        margin: 0;
        padding: 0
      }

      button,
      select {
        text-transform: none
      }

      [type=button],
      [type=reset],
      [type=submit],
      button {
        -webkit-appearance: button;
        background-color: transparent;
        background-image: none
      }

      :-moz-focusring {
        outline: auto
      }

      :-moz-ui-invalid {
        box-shadow: none
      }

      progress {
        vertical-align: baseline
      }

      ::-webkit-inner-spin-button,
      ::-webkit-outer-spin-button {
        height: auto
      }

      [type=search] {
        -webkit-appearance: textfield;
        outline-offset: -2px
      }

      ::-webkit-search-decoration {
        -webkit-appearance: none
      }

      ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit
      }

      summary {
        display: list-item
      }

      blockquote,
      dd,
      dl,
      figure,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      hr,
      p,
      pre {
        margin: 0
      }

      fieldset {
        margin: 0
      }

      fieldset,
      legend {
        padding: 0
      }

      menu,
      ol,
      ul {
        list-style: none;
        margin: 0;
        padding: 0
      }

      textarea {
        resize: vertical
      }

      input::-moz-placeholder,
      textarea::-moz-placeholder {
        opacity: 1;
        color: #bdbdbd
      }

      input::placeholder,
      textarea::placeholder {
        opacity: 1;
        color: #bdbdbd
      }

      [role=button],
      button {
        cursor: pointer
      }

      :disabled {
        cursor: default
      }

      audio,
      canvas,
      embed,
      iframe,
      img,
      object,
      svg,
      video {
        display: block;
        vertical-align: middle
      }

      img,
      video {
        max-width: 100%;
        height: auto
      }

      [hidden] {
        display: none
      }

      :root,
      [data-theme] {
        background-color: hsla(var(--b1)/var(--tw-bg-opacity, 1));
        color: hsla(var(--bc)/var(--tw-text-opacity, 1))
      }

      html {
        -webkit-tap-highlight-color: transparent
      }

      :root {
        --p: 183 47% 59%;
        --pf: 183 47% 47%;
        --sf: 338 71% 62%;
        --af: 39 84% 46%;
        --nf: 280 46% 11%;
        --in: 198 93% 60%;
        --su: 158 64% 52%;
        --wa: 43 96% 56%;
        --er: 0 91% 71%;
        --pc: 183 100% 12%;
        --sc: 338 100% 16%;
        --ac: 39 100% 12%;
        --nc: 280 83% 83%;
        --inc: 198 100% 12%;
        --suc: 158 100% 10%;
        --wac: 43 100% 11%;
        --erc: 0 100% 14%;
        --rounded-box: 1rem;
        --rounded-badge: 1.9rem;
        --animation-btn: 0.25s;
        --animation-input: .2s;
        --btn-text-case: uppercase;
        --btn-focus-scale: 0.95;
        --border-btn: 1px;
        --s: 338 71% 78%;
        --a: 39 84% 58%;
        --n: 280 46% 14%;
        --b1: 24 33% 97%;
        --b2: 27 22% 92%;
        --b3: 22 14% 89%;
        --bc: 280 46% 14%;
        --rounded-btn: 1.9rem;
        --tab-border: 2px;
        --tab-radius: .5rem
      }

      *,
      :after,
      :before {
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(33, 150, 243, .5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia:
      }

      .container {
        width: 100%
      }

      @media (min-width:540px) {
        .container {
          max-width: 540px
        }
      }

      @media (min-width:720px) {
        .container {
          max-width: 720px
        }
      }

      @media (min-width:960px) {
        .container {
          max-width: 960px
        }
      }

      @media (min-width:1140px) {
        .container {
          max-width: 1140px
        }
      }

      @media (min-width:1320px) {
        .container {
          max-width: 1320px
        }
      }

      .accordion .collapse.open {
        opacity: 1;
        height: 100%;
        transition: all .35s ease
      }

      .accordion .collapse:not(.open) {
        opacity: 0;
        height: 0;
        transition: all .35s ease
      }

      .alert {
        position: relative;
        margin-bottom: 1rem;
        border: 0 solid transparent;
        border-radius: .375rem;
        line-height: 1.25rem;
        opacity: 1;
        transition: opacity .15s linear
      }

      .alert.hide {
        opacity: 0;
        display: none
      }

      .avatar {
        color: #fff;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        border-radius: 50rem;
        height: 2.5rem;
        width: 2.5rem;
        transition: all .2s ease-in-out
      }

      .avatar img {
        border-radius: .75rem
      }

      .avatar.avatar-circular img {
        border-radius: 50%
      }

      .avatar.avatar-xs {
        height: 1.25rem;
        width: 1.25rem
      }

      .avatar.avatar-sm {
        height: 1.75rem;
        width: 1.75rem
      }

      .avatar.avatar-md {
        height: 2.5rem;
        width: 2.5rem
      }

      .avatar.avatar-lg {
        height: 3rem;
        width: 3rem
      }

      .avatar.avatar-xl {
        height: 4rem;
        width: 4rem
      }

      .avatar.avatar-xxl {
        height: 5rem;
        width: 5rem
      }

      .button {
        padding: .625rem 1.5rem;
        border-radius: .5rem;
        font-weight: 500;
        font-size: .75rem;
        display: inline-block;
        line-height: 1.667;
        text-align: center;
        vertical-align: middle;
        transition: all .15s ease-in;
        cursor: pointer;
        letter-spacing: 0;
        background-size: 150%;
        background-position-x: 25%;
        position: relative;
        overflow: hidden;
        text-transform: uppercase
      }

      .button.button-icon {
        padding: .625rem;
        line-height: normal
      }

      .button.button-icon i {
        position: relative;
        top: 1px;
        font-size: 1rem
      }

      .card {
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border-radius: .75rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)
      }

      .card.card-plain {
        box-shadow: none;
        background-color: transparent
      }

      .card .card-header {
        transform: translateZ(0);
        transition: all .3s cubic-bezier(.34, 1.61, .7, 1)
      }

      .card .card-img {
        border-radius: .5rem
      }

      .card .card-body {
        padding: 1.5rem;
        flex: 1 1 auto
      }

      .card .card-footer {
        padding: 0 1.5rem 1.5rem;
        background-color: transparent
      }

      .card[data-animation=true]:hover .card-header {
        transform: translate3d(0, -50px, 0)
      }

      .card .colored-shadow {
        transform: scale(.94);
        top: 3.5%;
        filter: blur(12px);
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        z-index: -1
      }

      .checkbox:checked+.form-check-input:after {
        transition: opacity .25s ease-in-out;
        content: " ";
        background-image: url("data:image/svg+xml,%3Csvgxmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 50%;
        width: 100%;
        height: 100%;
        color: #fff;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .67rem
      }

      .checkbox:checked+.form-check-input {
        background-color: #e91e63;
        border-color: #e91e63
      }

      .dialog.open {
        visibility: visible;
        opacity: 1;
        z-index: 1050
      }

      .dialog.open .modal-dialog {
        transform: none;
        z-index: 1212
      }

      .form-label,
      label {
        font-size: .875rem;
        font-weight: 400;
        margin-bottom: .5rem;
        color: #607d8b;
        margin-left: 0;
        transition: all .2s ease
      }

      .dropdown-menu .menu-item+.dropdown-menu.open {
        opacity: 1 !important
      }

      .menu {
        position: relative
      }

      .menu.open .dropdown-menu {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
        margin-top: 2.8125rem
      }

      .menu.open .dropdown-menu:before {
        top: -19px
      }

      .navbar {
        position: relative;
        padding: .5rem 1rem;
        border-radius: .75rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)
      }

      .navbar .navbar-collapse {
        display: flex;
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center
      }

      @media (max-width:992px) {
        .navbar .navbar-collapse.collapse:not(.open) {
          display: none
        }

        .navbar .navbar-collapse {
          display: block;
          position: relative;
          width: 100%;
          left: 0;
          z-index: 12
        }

        .navbar .navbar-collapse .navbar-nav {
          display: block
        }
      }

      .navbar .navbar-nav {
        display: flex;
        flex-direction: row;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        margin-left: auto
      }

      .navbar .nav-link {
        padding: .5rem 1rem;
        font-weight: 400;
        font-size: .875rem;
        color: #344767;
        align-items: center;
        display: flex
      }

      .navbar .nav-brand {
        color: #344767;
        font-size: .875rem;
        font-weight: 700;
        width: inherit
      }

      .navbar .navbar-trigger {
        padding: .25rem .75rem;
        font-size: 1.125rem;
        line-height: 1;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: .5rem;
        transition: box-shadow .15s ease-in-out
      }

      .navbar .navbar-trigger .navbar-trigger-icon {
        background-image: none
      }

      .navbar .navbar-trigger-icon {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 100%
      }

      .navbar .navbar-trigger-bar {
        display: block;
        position: relative;
        width: 28px;
        height: 1px;
        border-radius: 1px;
        background: #6c757d;
        transition: all .2s
      }

      .popover[data-placement=top] .arrow {
        bottom: -4px;
        top: auto
      }

      .popover[data-placement=right] .arrow {
        left: -4px
      }

      .popover[data-placement=bottom] .arrow {
        top: -4px
      }

      .popover[data-placement=left] .arrow {
        right: -4px
      }

      .popover .arrow,
      .popover .arrow:before {
        position: absolute;
        width: .5rem;
        height: .5rem;
        background: inherit
      }

      .popover .arrow {
        visibility: hidden;
        top: -4px
      }

      .popover .arrow:before {
        visibility: visible;
        content: "";
        transform: rotate(45deg)
      }

      .tabs .nav-item .nav-link {
        display: block;
        position: relative;
        transition: background-color .5s ease;
        z-index: 10;
        width: 100%
      }

      .tabs .nav-item .nav-link color {
        400: #42424a;
        500: #344767;
        600: #191919
      }

      .tabs .nav-item .nav-link {
        cursor: pointer;
        border-radius: .5rem;
        background-color: inherit
      }

      .tabs .moving-tab .nav-link.active {
        color: transparent;
        font-weight: 600
      }

      .tooltip[data-placement^=top]>.arrow {
        bottom: -4px
      }

      .tooltip[data-placement^=bottom]>.arrow {
        top: -4px
      }

      .tooltip[data-placement^=left]>.arrow {
        right: -4px
      }

      .tooltip[data-placement^=right]>.arrow {
        left: -4px
      }

      .tooltip .arrow,
      .tooltip .arrow:before {
        position: absolute;
        width: .5rem;
        height: .5rem;
        background: inherit
      }

      .tooltip .arrow {
        visibility: hidden
      }

      .tooltip .arrow:before {
        visibility: visible;
        content: "";
        transform: rotate(45deg)
      }

      * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-weight: 400;
        letter-spacing: -.05rem;
        margin-bottom: .5rem;
        color: #212121
      }

      a {
        color: #212121
      }

      .heading-1,
      h1 {
        font-size: 3rem;
        line-height: 1.25
      }

      .heading-2,
      h2 {
        font-size: 2.25rem;
        line-height: 1.3
      }

      .heading-3,
      h3 {
        font-size: 1.875rem;
        line-height: 1.375
      }

      .heading-4,
      h4 {
        font-size: 1.5rem;
        line-height: 1.375
      }

      .heading-5,
      h5 {
        font-size: 1.25rem;
        line-height: 1.375
      }

      .heading-6,
      h6 {
        font-size: 1rem;
        text-transform: uppercase
      }

      .heading-6,
      h6,
      p {
        line-height: 1.625
      }

      p {
        font-weight: 300
      }

      .alert {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b2, var(--b1))/var(--tw-bg-opacity));
        padding: 1rem;
        border-radius: var(--rounded-box, 1rem)
      }

      .alert>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
      }

      @media (min-width:768px) {
        .alert {
          flex-direction: row
        }

        .alert>:not([hidden])~:not([hidden]) {
          --tw-space-y-reverse: 0;
          margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
          margin-bottom: calc(0px * var(--tw-space-y-reverse))
        }
      }

      .alert>:where(*) {
        display: flex;
        align-items: center;
        gap: .5rem
      }

      .avatar {
        position: relative;
        display: inline-flex
      }

      .avatar>div {
        display: block;
        aspect-ratio: 1/1;
        overflow: hidden
      }

      .avatar img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover
      }

      .avatar.placeholder>div {
        display: flex
      }

      .avatar.placeholder>div,
      .btn {
        align-items: center;
        justify-content: center
      }

      .btn {
        display: inline-flex;
        flex-shrink: 0;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        flex-wrap: wrap;
        border-color: transparent;
        border-color: hsl(var(--n)/var(--tw-border-opacity));
        text-align: center;
        transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        border-radius: var(--rounded-btn, .5rem);
        height: 3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: .875rem;
        line-height: 1.25rem;
        line-height: 1em;
        min-height: 3rem;
        font-weight: 600;
        text-transform: uppercase;
        text-transform: var(--btn-text-case, uppercase);
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
        border-width: var(--border-btn, 1px);
        animation: button-pop var(--animation-btn, .25s) ease-out;
        --tw-border-opacity: 1;
        --tw-bg-opacity: 1;
        background-color: hsl(var(--n)/var(--tw-bg-opacity));
        --tw-text-opacity: 1;
        color: hsl(var(--nc)/var(--tw-text-opacity))
      }

      .btn-disabled,
      .btn.loading,
      .btn.loading:hover,
      .btn[disabled] {
        pointer-events: none
      }

      .btn.loading:before {
        margin-right: .5rem;
        height: 1rem;
        width: 1rem;
        border-radius: 9999px;
        border-width: 2px;
        animation: spin 2s linear infinite;
        content: "";
        border-color: transparent currentColor currentColor transparent
      }

      @media (prefers-reduced-motion:reduce) {
        .btn.loading:before {
          animation: spin 10s linear infinite
        }
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg)
        }

        to {
          transform: rotate(1turn)
        }
      }

      .btn-group>input[type=radio].btn {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
      }

      .btn-group>input[type=radio].btn:before {
        content: attr(data-title)
      }

      .card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--rounded-box, 1rem)
      }

      .card:focus {
        outline: 2px solid transparent;
        outline-offset: 2px
      }

      .card-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        padding: var(--padding-card, 2rem);
        gap: .5rem
      }

      .card-body :where(p) {
        flex-grow: 1
      }

      .card-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .5rem
      }

      .card figure {
        display: flex;
        align-items: center;
        justify-content: center
      }

      .card.image-full {
        display: grid
      }

      .card.image-full:before {
        position: relative;
        content: "";
        z-index: 10;
        --tw-bg-opacity: 1;
        background-color: hsl(var(--n)/var(--tw-bg-opacity));
        opacity: .75;
        border-radius: var(--rounded-box, 1rem)
      }

      .card.image-full:before,
      .card.image-full>* {
        grid-column-start: 1;
        grid-row-start: 1
      }

      .card.image-full>figure img {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
      }

      .card.image-full>.card-body {
        position: relative;
        z-index: 20;
        --tw-text-opacity: 1;
        color: hsl(var(--nc)/var(--tw-text-opacity))
      }

      .checkbox {
        flex-shrink: 0;
        --chkbg: var(--bc);
        --chkfg: var(--b1);
        height: 1.5rem;
        width: 1.5rem;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-width: 1px;
        border-color: hsl(var(--bc)/var(--tw-border-opacity));
        --tw-border-opacity: 0.2;
        border-radius: var(--rounded-btn, .5rem)
      }

      .collapse {
        position: relative;
        display: grid;
        overflow: hidden
      }

      .collapse-content,
      .collapse-title,
      .collapse>input[type=checkbox] {
        grid-column-start: 1;
        grid-row-start: 1
      }

      .collapse>input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        opacity: 0
      }

      .collapse-content {
        grid-row-start: 2;
        overflow: hidden;
        max-height: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        cursor: unset;
        transition: padding .2s ease-in-out, background-color .2s ease-in-out
      }

      .collapse-open .collapse-content,
      .collapse:focus:not(.collapse-close) .collapse-content,
      .collapse:not(.collapse-close) input[type=checkbox]:checked~.collapse-content {
        max-height: 9000px
      }

      .footer {
        width: 100%;
        grid-auto-flow: row;
        row-gap: 2.5rem;
        -moz-column-gap: 1rem;
        column-gap: 1rem;
        font-size: .875rem;
        line-height: 1.25rem
      }

      .footer,
      .footer>* {
        display: grid;
        place-items: start
      }

      .footer>* {
        gap: .5rem
      }

      @media (min-width:48rem) {
        .footer {
          grid-auto-flow: column
        }

        .footer-center {
          grid-auto-flow: row dense
        }
      }

      .label {
        display: flex;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        align-items: center;
        justify-content: space-between;
        padding: .5rem .25rem
      }

      .input {
        flex-shrink: 1;
        transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        height: 3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: .875rem;
        line-height: 1.25rem;
        line-height: 2;
        border-width: 1px;
        border-color: hsl(var(--bc)/var(--tw-border-opacity));
        --tw-border-opacity: 0;
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b1)/var(--tw-bg-opacity));
        border-radius: var(--rounded-btn, .5rem)
      }

      .input-group>*,
      .input-group>.input {
        border-radius: 0
      }

      .link {
        cursor: pointer;
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline
      }

      .link-hover {
        -webkit-text-decoration-line: none;
        text-decoration-line: none
      }

      .link-hover:hover {
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline
      }

      .mask {
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center
      }

      .menu {
        display: flex;
        flex-direction: column
      }

      .menu.horizontal {
        display: inline-flex;
        flex-direction: row
      }

      .menu.horizontal :where(li) {
        flex-direction: row
      }

      .menu :where(li) {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch
      }

      .menu :where(li:not(.menu-title))>:where(:not(ul)) {
        display: flex
      }

      .menu :where(li:not(.disabled):not(.menu-title))>:where(:not(ul)) {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        align-items: center;
        outline: 2px solid transparent;
        outline-offset: 2px
      }

      .menu>:where(li>:not(ul):focus) {
        outline: 2px solid transparent;
        outline-offset: 2px
      }

      .menu>:where(li.disabled>:not(ul):focus) {
        cursor: auto
      }

      .menu>:where(li) :where(ul) {
        display: flex;
        flex-direction: column;
        align-items: stretch
      }

      .menu>:where(li)>:where(ul) {
        position: absolute;
        display: none;
        top: auto;
        left: 100%;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit
      }

      .menu>:where(li:hover)>:where(ul) {
        display: flex
      }

      .menu>:where(li:focus)>:where(ul) {
        display: flex
      }

      .modal {
        pointer-events: none;
        visibility: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        opacity: 0;
        z-index: 999;
        background-color: hsl(var(--nf, var(--n))/var(--tw-bg-opacity));
        --tw-bg-opacity: 0.4;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-property: transform, opacity;
        overflow-y: hidden;
        overscroll-behavior: contain
      }

      :where(.modal) {
        align-items: center
      }

      .modal-box {
        max-height: calc(100vh - 5em);
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b1)/var(--tw-bg-opacity));
        padding: 1.5rem;
        transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        width: 91.666667%;
        max-width: 32rem;
        --tw-scale-x: .9;
        --tw-scale-y: .9;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        border-top-left-radius: var(--rounded-box, 1rem);
        border-top-right-radius: var(--rounded-box, 1rem);
        border-bottom-left-radius: var(--rounded-box, 1rem);
        border-bottom-right-radius: var(--rounded-box, 1rem);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
        overflow-y: auto;
        overscroll-behavior: contain
      }

      .modal-open,
      .modal-toggle:checked+.modal,
      .modal:target {
        pointer-events: auto;
        visibility: visible;
        opacity: 1
      }

      .modal-action {
        display: flex;
        margin-top: 1.5rem;
        justify-content: flex-end
      }

      .modal-toggle {
        position: fixed;
        height: 0;
        width: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        opacity: 0
      }

      .navbar {
        display: flex;
        align-items: center;
        padding: var(--navbar-padding, .5rem);
        min-height: 4rem;
        width: 100%
      }

      :where(.navbar>*) {
        display: inline-flex;
        align-items: center
      }

      .textarea {
        flex-shrink: 1;
        transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        padding: .5rem 1rem;
        font-size: .875rem;
        line-height: 1.25rem;
        line-height: 2;
        min-height: 3rem;
        border-width: 1px;
        border-color: hsl(var(--bc)/var(--tw-border-opacity));
        --tw-border-opacity: 0;
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b1)/var(--tw-bg-opacity));
        border-radius: var(--rounded-btn, .5rem)
      }

      .avatar-group .avatar {
        overflow: hidden;
        border-radius: 9999px;
        border-width: 4px;
        --tw-border-opacity: 1;
        border-color: hsl(var(--b1)/var(--tw-border-opacity))
      }

      .btn:active:focus,
      .btn:active:hover {
        animation: none;
        transform: scale(var(--btn-focus-scale, .95))
      }

      .btn-active,
      .btn:hover {
        --tw-border-opacity: 1;
        border-color: hsl(var(--nf, var(--n))/var(--tw-border-opacity));
        --tw-bg-opacity: 1;
        background-color: hsl(var(--nf, var(--n))/var(--tw-bg-opacity))
      }

      .btn:focus-visible {
        outline: 2px solid hsl(var(--nf));
        outline-offset: 2px
      }

      .btn.glass.btn-active,
      .btn.glass:hover {
        --glass-opacity: 25%;
        --glass-border-opacity: 15%
      }

      .btn.glass:focus-visible {
        outline: 2px 0 0 2px solid currentColor
      }

      .btn-ghost {
        border-width: 1px;
        border-color: transparent;
        background-color: transparent;
        color: currentColor
      }

      .btn-ghost.btn-active,
      .btn-ghost:hover {
        --tw-border-opacity: 0;
        background-color: hsl(var(--bc)/var(--tw-bg-opacity));
        --tw-bg-opacity: 0.2
      }

      .btn-ghost:focus-visible {
        outline: 2px 0 0 2px solid currentColor
      }

      .btn-disabled,
      .btn-disabled:hover,
      .btn[disabled],
      .btn[disabled]:hover {
        --tw-border-opacity: 0;
        background-color: hsl(var(--n)/var(--tw-bg-opacity));
        --tw-bg-opacity: 0.2;
        color: hsl(var(--bc)/var(--tw-text-opacity));
        --tw-text-opacity: 0.2
      }

      .btn.loading.btn-circle:before,
      .btn.loading.btn-square:before {
        margin-right: 0
      }

      .btn.loading.btn-lg:before,
      .btn.loading.btn-xl:before {
        height: 1.25rem;
        width: 1.25rem
      }

      .btn.loading.btn-sm:before,
      .btn.loading.btn-xs:before {
        height: .75rem;
        width: .75rem
      }

      .btn-group>.btn-active,
      .btn-group>input[type=radio]:checked.btn {
        --tw-border-opacity: 1;
        border-color: hsl(var(--p)/var(--tw-border-opacity));
        --tw-bg-opacity: 1;
        background-color: hsl(var(--p)/var(--tw-bg-opacity));
        --tw-text-opacity: 1;
        color: hsl(var(--pc)/var(--tw-text-opacity))
      }

      .btn-group>.btn-active:focus-visible,
      .btn-group>input[type=radio]:checked.btn:focus-visible {
        outline: 2px solid hsl(var(--p))
      }

      .btn-group:not(.btn-group-vertical)>.btn:not(:first-of-type) {
        margin-left: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
      }

      .btn-group:not(.btn-group-vertical)>.btn:not(:last-of-type) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
      }

      .btn-group-vertical>.btn:not(:first-of-type) {
        margin-top: -1px;
        border-top-left-radius: 0;
        border-top-right-radius: 0
      }

      .btn-group-vertical>.btn:not(:last-of-type) {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0
      }

      @keyframes button-pop {
        0% {
          transform: scale(var(--btn-focus-scale, .95))
        }

        40% {
          transform: scale(1.02)
        }

        to {
          transform: scale(1)
        }
      }

      .card:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px
      }

      .card.bordered {
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: hsl(var(--b2, var(--b1))/var(--tw-border-opacity))
      }

      .card.compact .card-body {
        padding: 1rem;
        font-size: .875rem;
        line-height: 1.25rem
      }

      .checkbox:focus-visible {
        outline: 2px solid hsl(var(--bc));
        outline-offset: 2px
      }

      .checkbox:checked,
      .checkbox[checked=true] {
        --tw-bg-opacity: 1;
        background-color: hsl(var(--bc)/var(--tw-bg-opacity));
        background-repeat: no-repeat;
        animation: checkmark var(--animation-input, .2s) ease-in-out;
        background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%)
      }

      .checkbox:indeterminate {
        --tw-bg-opacity: 1;
        background-color: hsl(var(--bc)/var(--tw-bg-opacity));
        background-repeat: no-repeat;
        animation: checkmark var(--animation-input, .2s) ease-in-out;
        background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(0deg, hsl(var(--chkbg)) 43%, hsl(var(--chkfg)) 43%, hsl(var(--chkfg)) 57%, hsl(var(--chkbg)) 57%)
      }

      .checkbox:disabled {
        cursor: not-allowed;
        border-color: transparent;
        --tw-bg-opacity: 1;
        background-color: hsl(var(--bc)/var(--tw-bg-opacity));
        opacity: .2
      }

      @keyframes checkmark {
        0% {
          background-position-y: 5px
        }

        50% {
          background-position-y: -2px
        }

        to {
          background-position-y: 0
        }
      }

      body[dir=rtl] .checkbox {
        --chkbg: var(--bc);
        --chkfg: var(--b1)
      }

      body[dir=rtl] .checkbox:checked,
      body[dir=rtl] .checkbox[checked=true] {
        background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%)
      }

      .collapse:focus-visible {
        outline: 2px solid hsl(var(--nf));
        outline-offset: 2px
      }

      .collapse-arrow .collapse-title:after {
        transition-duration: .15s;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        top: 1.4rem;
        content: "";
        transform-origin: 75% 75%;
        transform: rotate(45deg);
        box-shadow: 2px 2px
      }

      .collapse-arrow .collapse-title:after,
      .collapse-plus .collapse-title:after {
        position: absolute;
        display: block;
        height: .5rem;
        width: .5rem;
        transition-property: all;
        right: 1.4rem;
        pointer-events: none
      }

      .collapse-plus .collapse-title:after {
        transition-duration: .3s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        top: .9rem;
        content: "+"
      }

      .collapse:not(.collapse-open):not(.collapse-close) .collapse-title,
      .collapse:not(.collapse-open):not(.collapse-close) input[type=checkbox] {
        cursor: pointer
      }

      .collapse:focus:not(.collapse-open):not(.collapse-close) .collapse-title {
        cursor: unset
      }

      .collapse-title,
      .collapse>input[type=checkbox] {
        width: 100%;
        padding: 1rem 3rem 1rem 1rem;
        min-height: 3.75rem;
        transition: background-color .2s ease-in-out
      }

      .collapse-open :where(.collapse-content),
      .collapse:focus:not(.collapse-close) :where(.collapse-content),
      .collapse:not(.collapse-close) :where(input[type=checkbox]:checked~.collapse-content) {
        padding-bottom: 1rem;
        transition: padding .2s ease-in-out, background-color .2s ease-in-out
      }

      .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
      .collapse-arrow:not(.collapse-close) input[type=checkbox]:checked~.collapse-title:after,
      .collapse-open.collapse-arrow .collapse-title:after {
        transform: rotate(225deg)
      }

      .collapse-open.collapse-plus .collapse-title:after,
      .collapse-plus:focus:not(.collapse-close) .collapse-title:after,
      .collapse-plus:not(.collapse-close) input[type=checkbox]:checked~.collapse-title:after {
        content: "−"
      }

      .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-ghost {
        outline: 2px solid currentColor
      }

      .footer-title {
        margin-bottom: .5rem;
        font-weight: 700;
        text-transform: uppercase;
        opacity: .5
      }

      .label a:hover {
        --tw-text-opacity: 1;
        color: hsl(var(--bc)/var(--tw-text-opacity))
      }

      .input[list]::-webkit-calendar-picker-indicator {
        line-height: 1em
      }

      .input:focus {
        outline: 2px solid hsla(var(--bc)/.2);
        outline-offset: 2px
      }

      .input-disabled,
      .input[disabled] {
        cursor: not-allowed;
        --tw-border-opacity: 1;
        border-color: hsl(var(--b2, var(--b1))/var(--tw-border-opacity));
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b2, var(--b1))/var(--tw-bg-opacity));
        --tw-text-opacity: 0.2
      }

      .input-disabled::-moz-placeholder,
      .input[disabled]::-moz-placeholder {
        color: hsl(var(--bc)/var(--tw-placeholder-opacity));
        --tw-placeholder-opacity: 0.2
      }

      .input-disabled::placeholder,
      .input[disabled]::placeholder {
        color: hsl(var(--bc)/var(--tw-placeholder-opacity));
        --tw-placeholder-opacity: 0.2
      }

      .link:focus {
        outline: 2px solid transparent;
        outline-offset: 2px
      }

      .link:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px
      }

      .menu.horizontal li.bordered>a,
      .menu.horizontal li.bordered>button,
      .menu.horizontal li.bordered>span {
        border-left-width: 0;
        border-bottom-width: 4px;
        --tw-border-opacity: 1;
        border-color: hsl(var(--p)/var(--tw-border-opacity))
      }

      .menu[class*=" p-"] li>*,
      .menu[class^=p-] li>* {
        border-radius: var(--rounded-btn, .5rem)
      }

      .menu :where(li.bordered>*) {
        border-left-width: 4px;
        --tw-border-opacity: 1;
        border-color: hsl(var(--p)/var(--tw-border-opacity))
      }

      .menu :where(li)>:where(:not(ul)) {
        gap: .75rem;
        padding: .75rem 1rem;
        color: currentColor
      }

      .menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul):focus),
      .menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul):hover) {
        background-color: hsl(var(--bc)/var(--tw-bg-opacity));
        --tw-bg-opacity: 0.1
      }

      .menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul).active),
      .menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul):active) {
        --tw-bg-opacity: 1;
        background-color: hsl(var(--p)/var(--tw-bg-opacity));
        --tw-text-opacity: 1;
        color: hsl(var(--pc)/var(--tw-text-opacity))
      }

      .menu :where(li:empty) {
        margin: .5rem 1rem;
        height: 1px;
        background-color: hsl(var(--bc)/var(--tw-bg-opacity));
        --tw-bg-opacity: 0.1
      }

      .menu li.disabled>* {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        color: hsl(var(--bc)/var(--tw-text-opacity));
        --tw-text-opacity: 0.2
      }

      .menu li.disabled>:hover {
        background-color: transparent
      }

      .menu li.hover-bordered a {
        border-left-width: 4px;
        border-color: transparent
      }

      .menu li.hover-bordered a:hover {
        --tw-border-opacity: 1;
        border-color: hsl(var(--p)/var(--tw-border-opacity))
      }

      .menu.compact li>a,
      .menu.compact li>span {
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: .875rem;
        line-height: 1.25rem
      }

      .menu .menu-title>* {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: .75rem;
        line-height: 1rem;
        font-weight: 700;
        color: hsl(var(--bc)/var(--tw-text-opacity));
        --tw-text-opacity: 0.4
      }

      .menu :where(li:not(.disabled))>:where(:not(ul)) {
        outline: 2px solid transparent;
        outline-offset: 2px;
        transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1)
      }

      .menu>:where(li:first-child) {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        border-bottom-right-radius: unset;
        border-bottom-left-radius: unset
      }

      .menu>:where(li:first-child)>:where(:not(ul)) {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        border-bottom-right-radius: unset;
        border-bottom-left-radius: unset
      }

      .menu>:where(li:last-child) {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit
      }

      .menu>:where(li:last-child)>:where(:not(ul)) {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit
      }

      .menu>:where(li)>:where(ul) :where(li) {
        width: 100%;
        white-space: nowrap
      }

      .menu>:where(li)>:where(ul) :where(li) :where(ul) {
        padding-left: 1rem
      }

      .menu>:where(li)>:where(ul) :where(li)>:where(:not(ul)) {
        width: 100%;
        white-space: nowrap
      }

      .menu>:where(li)>:where(ul)>:where(li:first-child) {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        border-bottom-right-radius: unset;
        border-bottom-left-radius: unset
      }

      .menu>:where(li)>:where(ul)>:where(li:first-child)>:where(:not(ul)) {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        border-bottom-right-radius: unset;
        border-bottom-left-radius: unset
      }

      .menu>:where(li)>:where(ul)>:where(li:last-child) {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit
      }

      .menu>:where(li)>:where(ul)>:where(li:last-child)>:where(:not(ul)) {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit
      }

      .mockup-phone .display {
        overflow: hidden;
        border-radius: 40px;
        margin-top: -25px
      }

      .modal-open .modal-box,
      .modal-toggle:checked+.modal .modal-box,
      .modal:target .modal-box {
        --tw-translate-y: 0px;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .modal-action>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(.5rem * var(--tw-space-x-reverse));
        margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
      }

      @keyframes progress-loading {
        50% {
          left: 107%
        }
      }

      @keyframes radiomark {
        0% {
          box-shadow: 0 0 0 12px hsl(var(--b1)) inset, 0 0 0 12px hsl(var(--b1)) inset
        }

        50% {
          box-shadow: 0 0 0 3px hsl(var(--b1)) inset, 0 0 0 3px hsl(var(--b1)) inset
        }

        to {
          box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset
        }
      }

      @keyframes rating-pop {
        0% {
          transform: translateY(-.125em)
        }

        40% {
          transform: translateY(-.125em)
        }

        to {
          transform: translateY(0)
        }
      }

      .textarea:focus {
        outline: 2px solid hsla(var(--bc)/.2);
        outline-offset: 2px
      }

      .textarea-disabled,
      .textarea[disabled] {
        cursor: not-allowed;
        --tw-border-opacity: 1;
        border-color: hsl(var(--b2, var(--b1))/var(--tw-border-opacity));
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b2, var(--b1))/var(--tw-bg-opacity));
        --tw-text-opacity: 0.2
      }

      .textarea-disabled::-moz-placeholder,
      .textarea[disabled]::-moz-placeholder {
        color: hsl(var(--bc)/var(--tw-placeholder-opacity));
        --tw-placeholder-opacity: 0.2
      }

      .textarea-disabled::placeholder,
      .textarea[disabled]::placeholder {
        color: hsl(var(--bc)/var(--tw-placeholder-opacity));
        --tw-placeholder-opacity: 0.2
      }

      :root .prose {
        --tw-prose-body: hsla(var(--bc)/.8);
        --tw-prose-headings: hsl(var(--bc));
        --tw-prose-lead: hsl(var(--bc));
        --tw-prose-links: hsl(var(--bc));
        --tw-prose-bold: hsl(var(--bc));
        --tw-prose-counters: hsl(var(--bc));
        --tw-prose-bullets: hsla(var(--bc)/.5);
        --tw-prose-hr: hsla(var(--bc)/.2);
        --tw-prose-quotes: hsl(var(--bc));
        --tw-prose-quote-borders: hsla(var(--bc)/.2);
        --tw-prose-captions: hsla(var(--bc)/.5);
        --tw-prose-code: hsl(var(--bc));
        --tw-prose-pre-code: hsl(var(--nc));
        --tw-prose-pre-bg: hsl(var(--n));
        --tw-prose-th-borders: hsla(var(--bc)/.5);
        --tw-prose-td-borders: hsla(var(--bc)/.2)
      }

      .prose :where(code):not(:where([class~=not-prose] *)) {
        padding: 2px 8px;
        border-radius: var(--rounded-badge)
      }

      .prose code:after,
      .prose code:before {
        content: none
      }

      .prose pre code {
        border-radius: none;
        padding: 0
      }

      .prose :where(tbody tr, thead):not(:where([class~=not-prose] *)) {
        border-bottom-color: hsl(var(--bc)/20%)
      }

      .artboard.phone {
        width: 320px
      }

      .avatar.online:before {
        background-color: hsl(var(--su)/var(--tw-bg-opacity))
      }

      .avatar.offline:before,
      .avatar.online:before {
        content: "";
        position: absolute;
        z-index: 10;
        display: block;
        border-radius: 9999px;
        --tw-bg-opacity: 1;
        width: 15%;
        height: 15%;
        top: 7%;
        right: 7%;
        box-shadow: 0 0 0 2px hsl(var(--b1))
      }

      .avatar.offline:before {
        background-color: hsl(var(--b3, var(--b2))/var(--tw-bg-opacity))
      }

      .card-compact .card-body {
        padding: 1rem;
        font-size: .875rem;
        line-height: 1.25rem
      }

      .card-normal .card-body {
        padding: var(--padding-card, 2rem);
        font-size: 1rem;
        line-height: 1.5rem
      }

      .modal-bottom :where(.modal-box) {
        width: 100%;
        max-width: none;
        --tw-translate-y: 2.5rem;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0
      }

      .modal-middle :where(.modal-box) {
        width: 91.666667%;
        max-width: 32rem;
        --tw-translate-y: 0px;
        --tw-scale-x: .9;
        --tw-scale-y: .9;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        border-bottom-left-radius: var(--rounded-box, 1rem);
        border-bottom-right-radius: var(--rounded-box, 1rem)
      }

      .lockScroll {
        position: fixed;
        left: 0;
        width: 100%;
        top: 0;
        overflow: hidden
      }

      html {
        --tw-bg-opacity: 1;
        background-color: rgb(27 94 32/var(--tw-bg-opacity))
      }

      :root {
        --fullscreen-height: 100vh
      }

      #my-table table {
        margin: auto;
        border-collapse: collapse;
        width: 100%
      }

      #my-table table th,
      td {
        text-align: left
      }

      #my-table table th,
      #my-table th,
      td {
        border: 1px solid #000;
        padding: 8px
      }

      @supports (min-height:-webkit-fill-available) {
        --fullscreen-height: -webkit-fill-available
      }

      @supports (height:100dvh) {
        --fullscreen-height: 100svh
      }

      #game-categories a {
        --tw-text-opacity: 1;
        color: rgb(0 0 0/var(--tw-text-opacity))
      }

      #game-description strong {
        font-weight: 700
      }

      #game-description h1 {
        margin-bottom: .5rem;
        font-family: Torus, sans-serif, system-ui, -apple-system;
        font-size: 1.5rem;
        line-height: 2rem
      }

      #game-description p {
        word-break: break-word
      }

      #game-description h2 {
        margin-bottom: .5rem;
        font-size: 1.25rem
      }

      #game-description h2,
      #game-description h3 {
        font-family: Torus, sans-serif, system-ui, -apple-system;
        line-height: 1.75rem
      }

      #game-description h3 {
        margin-top: 1rem;
        margin-bottom: 1rem;
        font-size: 1.125rem
      }

      #game-description p {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        font-family: Proxima Nova, sans-serif, system-ui, -apple-system;
        font-size: 1rem;
        line-height: 1.5rem
      }

      #game-description a:not(.nav-link) {
        --tw-text-opacity: 1;
        color: rgb(21 101 192/var(--tw-text-opacity));
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline
      }

      #game-description ol {
        list-style-type: decimal
      }

      #game-description ol,
      #game-description ul {
        display: block;
        -webkit-margin-before: 1em;
        margin-block-start: 1em;
        -webkit-margin-after: 1em;
        margin-block-end: 1em;
        -webkit-margin-start: 0;
        margin-inline-start: 0;
        -webkit-margin-end: 0;
        margin-inline-end: 0;
        -webkit-padding-start: 40px;
        padding-inline-start: 40px
      }

      #game-description ul {
        list-style-type: disc
      }

      @media screen and (max-height:425px) {
        #game-card-bottom {
          display: none
        }
      }

      @media screen and (orientation:portrait) {
        #game-reminder-VerticalScreen {
          display: none
        }
      }

      @media screen and (orientation:landscape) {
        #game-reminder-HorizontalScreen {
          display: none
        }
      }

      #game-reminder-HorizontalScreen,
      #game-reminder-VerticalScreen {
        animation: cssHiddenAnimation 0s ease-in 5s forwards;
        animation-fill-mode: forwards
      }

      @keyframes cssHiddenAnimation {
        to {
          width: 0;
          height: 0;
          overflow: hidden;
          display: none
        }
      }

      @media screen and (max-height:700px) {

        #phoneGameIframe,
        #share-info-wrapper {
          height: 100%
        }

        #game-info-wrapper {
          display: none
        }
      }

      @media screen and (min-height:700px) {

        #phoneGameIframe,
        #share-info-wrapper {
          height: calc(100% - 64px)
        }
      }

      .icon-full:before {
        content: "\e607"
      }

      .icon-shrink {
        background: url(/images/shrink.svg) no-repeat;
        width: 36px;
        height: 36px;
        color: #fb5092;
        display: none
      }

      .game-icon-a {
        position: relative;
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .game-icon-a,
      .game-icon-img {
        width: 100%;
        border-radius: 1rem
      }

      .game-icon-img {
        height: 100%;
        overflow: clip;
        -o-object-fit: cover;
        object-fit: cover
      }

      .game-icon-h3 {
        position: absolute;
        bottom: 0;
        margin-bottom: -.5rem;
        width: 100%;
        overflow: hidden;
        overflow: clip;
        word-break: break-all;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        --tw-bg-opacity: 0.3;
        padding-bottom: .25rem;
        padding-top: .75rem;
        text-align: center;
        vertical-align: text-bottom;
        font-size: .75rem;
        line-height: 1rem;
        font-weight: 700;
        --tw-text-opacity: 1;
        color: hsl(var(--b1)/var(--tw-text-opacity));
        opacity: 0;
        transition-property: all;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .5s
      }

      @media screen and (max-width:1024px) {
        .group:hover .game-icon-h3 {
          --tw-translate-y: -0.5rem;
          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
          background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
          --tw-gradient-from: transparent;
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
          --tw-gradient-to: hsl(var(--bc)/0.7);
          opacity: 1
        }
      }

      @media screen and (min-width:1024px) {
        .game-icon-a:hover {
          z-index: 10;
          --tw-translate-y: -0.25rem;
          --tw-scale-x: 1.1;
          --tw-scale-y: 1.1;
          --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
          --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
          transition-property: all;
          transition-timing-function: cubic-bezier(.4, 0, .2, 1);
          transition-duration: .3s
        }

        .game-icon-a:hover,
        .group:hover .game-icon-h3 {
          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .group:hover .game-icon-h3 {
          --tw-translate-y: -0.5rem;
          background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
          --tw-gradient-from: transparent;
          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
          --tw-gradient-to: hsl(var(--bc)/0.7);
          opacity: 1
        }
      }

      .category-icon-a-col {
        flex-direction: column
      }

      .category-icon-a-col,
      .category-icon-a-row {
        width: 100%;
        overflow: clip;
        border-radius: 1rem;
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        display: flex
      }

      .category-icon-a-row {
        flex-direction: row
      }

      :root {
        --cellSize: 94px;
        --cellSpacing: 16px
      }

      .grid-container {
        grid-gap: var(--cellSpacing);
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-auto-flow: row dense;
        align-content: center;
        align-items: center;
        justify-content: center
      }

      .phone-game-play-area {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 40;
        display: none;
        height: 100%;
        width: 100%
      }

      @media only screen and (max-width:989px) {

        .grid-container .game-container #game-card,
        .grid-container .game-container #play-game-cover-pc {
          display: none
        }
      }

      @media only screen and (min-width:990px) {
        .grid-container .game-container #play-game-cover {
          display: none
        }

        .grid-container .game-container #play-game-cover-pc {
          display: flex
        }
      }

      @media (min-width:0px) and (max-width:550px) {
        .grid-container {
          grid-template-columns: repeat(3, var(--cellSize))
        }

        .grid-container .game-container,
        .grid-container .mobile-game-container {
          grid-column: span 3/span 3;
          grid-column-start: 1;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 1;
          grid-row: span 3/span 3;
          grid-row-start: 5;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-300x250-wrapper-unfixed {
          grid-column: span 3/span 3;
          grid-row: span 3/span 3;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-320x50-wrapper-fixed-row-4 {
          grid-column: span 3/span 3;
          grid-row: span 1/span 1;
          grid-row-start: 4;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-320x50-wrapper-fixed-row-10 {
          grid-row-start: 10;
          grid-column: span 3/span 3;
          flex-direction: column;
          display: flex
        }

        #game-description {
          grid-row-start: 8
        }

        .grid-container .ads-300x250-wrapper-fixed-row-12 {
          grid-column: span 3/span 3;
          flex-direction: column;
          display: flex;
          grid-row-start: 12;
          height: 314px
        }
      }

      @media (min-width:550px) and (max-width:660px) {
        .grid-container {
          grid-template-columns: repeat(4, var(--cellSize))
        }

        .grid-container .game-container,
        .grid-container .mobile-game-container {
          grid-column: span 3/span 3;
          grid-column-start: 1;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 1;
          grid-row: span 3/span 3;
          grid-row-start: 4;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-300x250-wrapper-unfixed {
          grid-column: span 3/span 3;
          grid-row: span 3/span 3;
          flex-direction: column;
          display: flex
        }
      }

      @media only screen and (min-width:660px) and (max-width:770px) {
        .grid-container {
          grid-template-columns: repeat(5, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 3/span 3;
          grid-column-start: 2;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .mobile-game-container {
          grid-column: span 3/span 3;
          grid-column-start: 1;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 2;
          grid-row: span 3/span 3;
          grid-row-start: 4;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-300x250-wrapper-unfixed {
          grid-column: span 3/span 3;
          grid-row: span 3/span 3;
          flex-direction: column;
          display: flex
        }
      }

      @media only screen and (min-width:770px) and (max-width:880px) {
        .grid-container {
          grid-template-columns: repeat(6, var(--cellSize))
        }

        .grid-container .game-container,
        .grid-container .mobile-game-container {
          grid-column: span 3/span 3;
          grid-column-start: 2;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 2;
          grid-row: span 3/span 3;
          grid-row-start: 4;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-300x250-wrapper-unfixed {
          grid-column: span 3/span 3;
          grid-row: span 3/span 3;
          flex-direction: column;
          display: flex
        }
      }

      @media only screen and (min-width:880px) and (max-width:990px) {
        .grid-container {
          grid-template-columns: repeat(7, var(--cellSize))
        }

        .grid-container .game-container,
        .grid-container .mobile-game-container {
          grid-column: span 3/span 3;
          grid-column-start: 3;
          grid-row: span 3/span 3;
          display: block;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 1;
          grid-row: span 1/span 1;
          grid-row-start: 4;
          flex-direction: row;
          display: flex
        }

        .grid-container .ads-728x90-wrapper-unfixed {
          position: relative;
          grid-column: span 7/span 7;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 7
        }
      }

      @media only screen and (min-width:990px) and (max-width:1100px) {
        .grid-container {
          grid-template-columns: repeat(9, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 6/span 6;
          grid-column-start: 2;
          grid-row: span 4/span 4;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 2;
          grid-row: span 1/span 1;
          grid-row-start: 5;
          flex-direction: row;
          display: flex
        }

        .grid-container .ads-728x90-wrapper-unfixed {
          position: relative;
          grid-column: span 7/span 7;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 7
        }
      }

      @media only screen and (min-width:1100px) and (max-width:1210px) {
        .grid-container {
          grid-template-columns: repeat(10, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 8/span 8;
          grid-column-start: 2;
          grid-row: span 5/span 5;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 3;
          grid-row: span 1/span 1;
          grid-row-start: 6;
          flex-direction: row;
          display: flex
        }

        .grid-container .ads-728x90-wrapper-unfixed {
          position: relative;
          grid-column: span 7/span 7;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 8
        }
      }

      @media only screen and (min-width:1210px) and (max-width:1320px) {
        .grid-container {
          grid-template-columns: repeat(11, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 8/span 8;
          grid-column-start: 2;
          grid-row: span 5/span 5;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 3;
          grid-row: span 1/span 1;
          grid-row-start: 6;
          flex-direction: row;
          display: flex
        }

        .grid-container .ads-728x90-wrapper-unfixed {
          position: relative;
          grid-column: span 7/span 7;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 8
        }
      }

      @media only screen and (min-width:1320px) {
        .grid-container {
          grid-template-columns: repeat(12, var(--cellSize))
        }

        .grid-container .game-container {
          grid-column: span 8/span 8;
          grid-column-start: 2;
          grid-row: span 5/span 5;
          height: 100%;
          width: 100%
        }

        .grid-container .ads-300x250-wrapper {
          grid-column: span 3/span 3;
          grid-column-start: 10;
          grid-row: span 3/span 3;
          grid-row-start: 1;
          flex-direction: column;
          display: flex
        }

        .grid-container .ads-728x90-wrapper {
          position: relative;
          grid-column: span 7/span 7;
          grid-column-start: 3;
          grid-row: span 1/span 1;
          grid-row-start: 6;
          flex-direction: row;
          display: flex
        }

        .grid-container .ads-728x90-wrapper-unfixed {
          position: relative;
          grid-column: span 7/span 7;
          flex-direction: row;
          display: flex
        }

        #game-description {
          grid-row-start: 8
        }
      }

      @media only screen and (min-width:768px) {
        .category-title {
          background-color: #fff;
          font-family: Torus, sans-serif, system-ui, -apple-system;
          font-size: 1.25rem;
          line-height: 1.75rem;
          font-weight: 700
        }

        .category-icon-a-col:hover,
        .category-icon-a-row:hover {
          transform: scale(1.1);
          transition: all .3s linear
        }
      }

      @media (max-width:768px) {
        .category-title {
          font-family: Proxima Nova, sans-serif, system-ui, -apple-system;
          font-size: .875rem;
          line-height: 1.25rem;
          font-weight: 700
        }
      }

      @supports (height:100dvh) {
        .fullscreen-mode {
          --minHeight: 100svh;
          --height: 100svh
        }
      }

      @supports (min-height:-webkit-fill-available) {
        .fullscreen-mode {
          --minHeight: -webkit-fill-available;
          --height: -webkit-fill-available
        }
      }

      .fullscreen-mode {
        height: var(--height, 100%);
        width: var(--width, 100%);
        --width: 100vw;
        min-height: var(--minHeight, 100vh);
        -o-object-fit: contain;
        object-fit: contain;
        -webkit-user-select: text;
        -moz-user-select: text;
        user-select: text;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        box-sizing: border-box !important;
        min-width: 100vw !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        margin: 0 !important;
        background-color: #fff;
        z-index: 100002 !important
      }

      :not(:root):-webkit-full-screen {
        object-fit: contain;
        -webkit-user-select: text;
        user-select: text;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        margin: 0 !important
      }

      :not(:root):fullscreen {
        -o-object-fit: contain;
        object-fit: contain;
        -webkit-user-select: text;
        -moz-user-select: text;
        user-select: text;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        margin: 0 !important
      }

      :not(:root):-webkit-full-screen::backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #000
      }

      :not(:root):fullscreen::backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #000
      }

      .visible {
        visibility: visible
      }

      .\!visible {
        visibility: visible !important
      }

      .fixed {
        position: fixed
      }

      .absolute {
        position: absolute
      }

      .relative {
        position: relative
      }

      .sticky {
        position: sticky
      }

      .inset-0 {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
      }

      .top-2 {
        top: .5rem
      }

      .-left-1\.5 {
        left: -.375rem
      }

      .-left-1 {
        left: -.25rem
      }

      .bottom-0 {
        bottom: 0
      }

      .top-1\/2 {
        top: 50%
      }

      .left-1\/2 {
        left: 50%
      }

      .-top-20 {
        top: -5rem
      }

      .right-2 {
        right: .5rem
      }

      .top-0 {
        top: 0
      }

      .left-0 {
        left: 0
      }

      .right-0 {
        right: 0
      }

      .top-4 {
        top: 1rem
      }

      .bottom-12 {
        bottom: 3rem
      }

      .right-10 {
        right: 2.5rem
      }

      .bottom-3 {
        bottom: .75rem
      }

      .right-7 {
        right: 1.75rem
      }

      .right-6 {
        right: 1.5rem
      }

      .top-8 {
        top: 2rem
      }

      .bottom-\[12px\] {
        bottom: 12px
      }

      .right-\[12px\] {
        right: 12px
      }

      .top-48 {
        top: 12rem
      }

      .top-72 {
        top: 18rem
      }

      .-top-1 {
        top: -.25rem
      }

      .bottom-16 {
        bottom: 4rem
      }

      .right-20 {
        right: 5rem
      }

      .top-16 {
        top: 4rem
      }

      .-left-2 {
        left: -.5rem
      }

      .top-1 {
        top: .25rem
      }

      .top-1\/3 {
        top: 33.333333%
      }

      .bottom-8 {
        bottom: 2rem
      }

      .isolate {
        isolation: isolate
      }

      .z-30 {
        z-index: 30
      }

      .z-\[32\] {
        z-index: 32
      }

      .z-50 {
        z-index: 50
      }

      .z-\[31\] {
        z-index: 31
      }

      .z-20 {
        z-index: 20
      }

      .z-40 {
        z-index: 40
      }

      .z-10 {
        z-index: 10
      }

      .z-\[11\] {
        z-index: 11
      }

      .-z-10 {
        z-index: -10
      }

      .col-span-3 {
        grid-column: span 3/span 3
      }

      .col-span-2 {
        grid-column: span 2/span 2
      }

      .col-span-full {
        grid-column: 1/-1
      }

      .col-start-1 {
        grid-column-start: 1
      }

      .col-start-2 {
        grid-column-start: 2
      }

      .col-start-5 {
        grid-column-start: 5
      }

      .col-start-3 {
        grid-column-start: 3
      }

      .row-span-2 {
        grid-row: span 2/span 2
      }

      .row-span-3 {
        grid-row: span 3/span 3
      }

      .row-start-2 {
        grid-row-start: 2
      }

      .row-start-3 {
        grid-row-start: 3
      }

      .m-1 {
        margin: .25rem
      }

      .m-2 {
        margin: .5rem
      }

      .m-auto {
        margin: auto
      }

      .m-4 {
        margin: 1rem
      }

      .m-24 {
        margin: 6rem
      }

      .m-3 {
        margin: .75rem
      }

      .mx-3 {
        margin-left: .75rem;
        margin-right: .75rem
      }

      .mx-auto {
        margin-left: auto;
        margin-right: auto
      }

      .my-auto {
        margin-top: auto;
        margin-bottom: auto
      }

      .my-1 {
        margin-top: .25rem;
        margin-bottom: .25rem
      }

      .my-4 {
        margin-top: 1rem;
        margin-bottom: 1rem
      }

      .my-2 {
        margin-top: .5rem;
        margin-bottom: .5rem
      }

      .mx-2 {
        margin-left: .5rem;
        margin-right: .5rem
      }

      .mx-4 {
        margin-left: 1rem;
        margin-right: 1rem
      }

      .mx-1 {
        margin-left: .25rem;
        margin-right: .25rem
      }

      .mt-auto {
        margin-top: auto
      }

      .mb-auto {
        margin-bottom: auto
      }

      .mt-2 {
        margin-top: .5rem
      }

      .ml-auto {
        margin-left: auto
      }

      .mr-auto {
        margin-right: auto
      }

      .ml-2 {
        margin-left: .5rem
      }

      .-ml-\[720px\] {
        margin-left: -720px
      }

      .-mt-96 {
        margin-top: -24rem
      }

      .ml-7 {
        margin-left: 1.75rem
      }

      .mt-4 {
        margin-top: 1rem
      }

      .ml-3 {
        margin-left: .75rem
      }

      .mr-16 {
        margin-right: 4rem
      }

      .mb-0 {
        margin-bottom: 0
      }

      .mr-3 {
        margin-right: .75rem
      }

      .mt-1 {
        margin-top: .25rem
      }

      .ml-1 {
        margin-left: .25rem
      }

      .ml-4 {
        margin-left: 1rem
      }

      .mt-0\.5 {
        margin-top: .125rem
      }

      .mt-0 {
        margin-top: 0
      }

      .-ml-0\.5 {
        margin-left: -.125rem
      }

      .-ml-0 {
        margin-left: 0
      }

      .-mr-8 {
        margin-right: -2rem
      }

      .-mt-4 {
        margin-top: -1rem
      }

      .mr-2 {
        margin-right: .5rem
      }

      .mr-4 {
        margin-right: 1rem
      }

      .-mt-12 {
        margin-top: -3rem
      }

      .ml-12 {
        margin-left: 3rem
      }

      .mt-24 {
        margin-top: 6rem
      }

      .mt-32 {
        margin-top: 8rem
      }

      .mb-1 {
        margin-bottom: .25rem
      }

      .mb-5 {
        margin-bottom: 1.25rem
      }

      .mb-3 {
        margin-bottom: .75rem
      }

      .mb-8 {
        margin-bottom: 2rem
      }

      .mb-4 {
        margin-bottom: 1rem
      }

      .block {
        display: block
      }

      .inline-block {
        display: inline-block
      }

      .inline-flex {
        display: inline-flex
      }

      .grid {
        display: grid
      }

      .inline-grid {
        display: inline-grid
      }

      .contents {
        display: contents
      }

      .hidden {
        display: none
      }

      .h-8 {
        height: 2rem
      }

      .h-7 {
        height: 1.75rem
      }

      .h-\[40px\] {
        height: 40px
      }

      .h-\[204px\] {
        height: 204px
      }

      .h-full {
        height: 100%
      }

      .h-0 {
        height: 0
      }

      .h-12 {
        height: 3rem
      }

      .h-2\/3 {
        height: 66.666667%
      }

      .h-1\/3 {
        height: 33.333333%
      }

      .h-\[94px\] {
        height: 94px
      }

      .h-32 {
        height: 8rem
      }

      .h-24 {
        height: 6rem
      }

      .h-48 {
        height: 12rem
      }

      .h-20 {
        height: 5rem
      }

      .h-6 {
        height: 1.5rem
      }

      .h-10 {
        height: 2.5rem
      }

      .h-fit {
        height: -moz-fit-content;
        height: fit-content
      }

      .h-96 {
        height: 24rem
      }

      .h-80 {
        height: 20rem
      }

      .h-11 {
        height: 2.75rem
      }

      .h-5 {
        height: 1.25rem
      }

      .h-14 {
        height: 3.5rem
      }

      .h-16 {
        height: 4rem
      }

      .h-\[88px\] {
        height: 88px
      }

      .h-\[45px\] {
        height: 45px
      }

      .h-\[50px\] {
        height: 50px
      }

      .h-\[314px\] {
        height: 314px
      }

      .h-\[250px\] {
        height: 250px
      }

      .h-\[90px\] {
        height: 90px
      }

      .h-4 {
        height: 1rem
      }

      .h-\[30px\] {
        height: 30px
      }

      .h-screen {
        height: 100vh
      }

      .h-\[calc\(100vh-64px\)\] {
        height: calc(100vh - 64px)
      }

      .h-44 {
        height: 11rem
      }

      .h-\[64px\] {
        height: 64px
      }

      .h-\[35px\] {
        height: 35px
      }

      .h-9 {
        height: 2.25rem
      }

      .h-64 {
        height: 16rem
      }

      .max-h-8 {
        max-height: 2rem
      }

      .max-h-32 {
        max-height: 8rem
      }

      .max-h-screen {
        max-height: 100vh
      }

      .min-h-\[40px\] {
        min-height: 40px
      }

      .min-h-\[50px\] {
        min-height: 50px
      }

      .min-h-0 {
        min-height: 0
      }

      .min-h-screen {
        min-height: 100vh
      }

      .min-h-\[32rem\] {
        min-height: 32rem
      }

      .w-12 {
        width: 3rem
      }

      .w-20 {
        width: 5rem
      }

      .w-\[26px\] {
        width: 26px
      }

      .w-5 {
        width: 1.25rem
      }

      .w-\[314px\] {
        width: 314px
      }

      .w-full {
        width: 100%
      }

      .w-8 {
        width: 2rem
      }

      .w-1\/3 {
        width: 33.333333%
      }

      .w-2\/3 {
        width: 66.666667%
      }

      .w-1\/2 {
        width: 50%
      }

      .w-\[94px\] {
        width: 94px
      }

      .w-14 {
        width: 3.5rem
      }

      .w-64 {
        width: 16rem
      }

      .w-24 {
        width: 6rem
      }

      .w-28 {
        width: 7rem
      }

      .w-fit {
        width: -moz-fit-content;
        width: fit-content
      }

      .w-6 {
        width: 1.5rem
      }

      .w-3\/4 {
        width: 75%
      }

      .w-4\/5 {
        width: 80%
      }

      .w-\[750px\] {
        width: 750px
      }

      .w-1\/4 {
        width: 25%
      }

      .w-11 {
        width: 2.75rem
      }

      .w-10 {
        width: 2.5rem
      }

      .w-\[176px\] {
        width: 176px
      }

      .w-80 {
        width: 20rem
      }

      .w-56 {
        width: 14rem
      }

      .w-\[320px\] {
        width: 320px
      }

      .w-\[300px\] {
        width: 300px
      }

      .w-\[728px\] {
        width: 728px
      }

      .w-44 {
        width: 11rem
      }

      .w-screen {
        width: 100vw
      }

      .w-\[64px\] {
        width: 64px
      }

      .w-96 {
        width: 24rem
      }

      .w-auto {
        width: auto
      }

      .w-9 {
        width: 2.25rem
      }

      .min-w-\[40px\] {
        min-width: 40px
      }

      .max-w-\[260px\] {
        max-width: 260px
      }

      .max-w-\[400px\] {
        max-width: 400px
      }

      .max-w-\[352px\] {
        max-width: 352px
      }

      .max-w-\[308px\] {
        max-width: 308px
      }

      .max-w-\[340px\] {
        max-width: 340px
      }

      .max-w-\[690px\] {
        max-width: 690px
      }

      .max-w-\[94px\] {
        max-width: 94px
      }

      .max-w-sm {
        max-width: 24rem
      }

      .max-w-md {
        max-width: 28rem
      }

      .max-w-3xl {
        max-width: 48rem
      }

      .flex-1 {
        flex: 1 1 0%
      }

      .flex-none {
        flex: none
      }

      .grow {
        flex-grow: 1
      }

      .-translate-x-1\/2 {
        --tw-translate-x: -50%
      }

      .-translate-x-1\/2,
      .-translate-y-1\/2 {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .-translate-y-1\/2 {
        --tw-translate-y: -50%
      }

      .translate-x-\[-50\%\] {
        --tw-translate-x: -50%
      }

      .translate-x-\[-50\%\],
      .translate-y-\[-50\%\] {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .translate-y-\[-50\%\] {
        --tw-translate-y: -50%
      }

      .rotate-90 {
        --tw-rotate: 90deg
      }

      .rotate-180,
      .rotate-90 {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .rotate-180 {
        --tw-rotate: 180deg
      }

      .scale-125 {
        --tw-scale-x: 1.25;
        --tw-scale-y: 1.25
      }

      .scale-125,
      .transform {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      @keyframes bounce {

        0%,
        to {
          transform: translateY(-25%);
          animation-timing-function: cubic-bezier(.8, 0, 1, 1)
        }

        50% {
          transform: none;
          animation-timing-function: cubic-bezier(0, 0, .2, 1)
        }
      }

      .animate-bounce {
        animation: bounce 1s infinite
      }

      .cursor-default {
        cursor: default
      }

      .cursor-pointer {
        cursor: pointer
      }

      .select-none {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
      }

      .resize-none {
        resize: none
      }

      .resize {
        resize: both
      }

      .scroll-m-60 {
        scroll-margin: 15rem
      }

      .list-disc {
        list-style-type: disc
      }

      .grid-flow-col {
        grid-auto-flow: column
      }

      .grid-flow-row-dense {
        grid-auto-flow: row dense
      }

      .auto-rows-max {
        grid-auto-rows: max-content
      }

      .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
      }

      .grid-rows-3 {
        grid-template-rows: repeat(3, minmax(0, 1fr))
      }

      .flex-row {
        flex-direction: row
      }

      .flex-row-reverse {
        flex-direction: row-reverse
      }

      .flex-col {
        flex-direction: column
      }

      .flex-wrap {
        flex-wrap: wrap
      }

      .items-center {
        align-items: center
      }

      .justify-end {
        justify-content: flex-end
      }

      .justify-center {
        justify-content: center
      }

      .justify-between {
        justify-content: space-between
      }

      .gap-4 {
        gap: 1rem
      }

      .gap-1 {
        gap: .25rem
      }

      .gap-2 {
        gap: .5rem
      }

      .gap-0 {
        gap: 0
      }

      .-space-x-px>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(-1px * var(--tw-space-x-reverse));
        margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)))
      }

      .self-center {
        align-self: center
      }

      .overflow-auto {
        overflow: auto
      }

      .overflow-hidden {
        overflow: hidden
      }

      .overflow-clip {
        overflow: clip
      }

      .overflow-x-hidden {
        overflow-x: hidden
      }

      .overflow-x-clip {
        overflow-x: clip
      }

      .overflow-y-scroll {
        overflow-y: scroll
      }

      .overscroll-y-none {
        overscroll-behavior-y: none
      }

      .overscroll-x-none {
        overscroll-behavior-x: none
      }

      .scroll-smooth {
        scroll-behavior: smooth
      }

      .truncate {
        overflow: hidden;
        text-overflow: ellipsis
      }

      .truncate,
      .whitespace-nowrap {
        white-space: nowrap
      }

      .break-all {
        word-break: break-all
      }

      .rounded {
        border-radius: .25rem
      }

      .rounded-2xl {
        border-radius: 1rem
      }

      .rounded-xl {
        border-radius: .75rem
      }

      .rounded-full {
        border-radius: 9999px
      }

      .rounded-3xl {
        border-radius: 1.5rem
      }

      .rounded-lg {
        border-radius: .5rem
      }

      .rounded-md {
        border-radius: .375rem
      }

      .rounded-t-2xl {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem
      }

      .rounded-l-2xl {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem
      }

      .rounded-l {
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem
      }

      .rounded-b-2xl {
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem
      }

      .rounded-l-md {
        border-top-left-radius: .375rem;
        border-bottom-left-radius: .375rem
      }

      .rounded-r-md {
        border-top-right-radius: .375rem;
        border-bottom-right-radius: .375rem
      }

      .border {
        border-width: 1px
      }

      .border-2 {
        border-width: 2px
      }

      .border-t {
        border-top-width: 1px
      }

      .border-r {
        border-right-width: 1px
      }

      .border-b {
        border-bottom-width: 1px
      }

      .border-t-2 {
        border-top-width: 2px
      }

      .border-none {
        border-style: none
      }

      .border-base-300 {
        --tw-border-opacity: 1;
        border-color: hsl(var(--b3, var(--b2))/var(--tw-border-opacity))
      }

      .border-gray-400 {
        --tw-border-opacity: 1;
        border-color: rgb(189 189 189/var(--tw-border-opacity))
      }

      .border-gray-700 {
        --tw-border-opacity: 1;
        border-color: rgb(97 97 97/var(--tw-border-opacity))
      }

      .border-green-800 {
        --tw-border-opacity: 1;
        border-color: rgb(46 125 50/var(--tw-border-opacity))
      }

      .border-gray-300 {
        --tw-border-opacity: 1;
        border-color: rgb(224 224 224/var(--tw-border-opacity))
      }

      .border-indigo-500 {
        --tw-border-opacity: 1;
        border-color: rgb(63 81 181/var(--tw-border-opacity))
      }

      .bg-base-200 {
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b2, var(--b1))/var(--tw-bg-opacity))
      }

      .bg-base-100 {
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b1)/var(--tw-bg-opacity))
      }

      .bg-white {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity))
      }

      .bg-blue-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(144 202 249/var(--tw-bg-opacity))
      }

      .bg-gray-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(224 224 224/var(--tw-bg-opacity))
      }

      .bg-green-400 {
        --tw-bg-opacity: 1;
        background-color: rgb(102 187 106/var(--tw-bg-opacity))
      }

      .bg-blue-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(100 181 246/var(--tw-bg-opacity))
      }

      .bg-gray-500 {
        --tw-bg-opacity: 1;
        background-color: rgb(158 158 158/var(--tw-bg-opacity))
      }

      .bg-green-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(165 214 167/var(--tw-bg-opacity))
      }

      .bg-gray-400 {
        --tw-bg-opacity: 1;
        background-color: rgb(189 189 189/var(--tw-bg-opacity))
      }

      .bg-pink-50 {
        --tw-bg-opacity: 1;
        background-color: rgb(252 228 236/var(--tw-bg-opacity))
      }

      .bg-blue-700 {
        --tw-bg-opacity: 1;
        background-color: rgb(25 118 210/var(--tw-bg-opacity))
      }

      .bg-red-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(229 57 53/var(--tw-bg-opacity))
      }

      .bg-black {
        --tw-bg-opacity: 1;
        background-color: rgb(0 0 0/var(--tw-bg-opacity))
      }

      .bg-gray-600 {
        --tw-bg-opacity: 1;
        background-color: rgb(117 117 117/var(--tw-bg-opacity))
      }

      .bg-light-green-100 {
        --tw-bg-opacity: 1;
        background-color: rgb(220 237 200/var(--tw-bg-opacity))
      }

      .bg-gray-100 {
        --tw-bg-opacity: 1;
        background-color: rgb(245 245 245/var(--tw-bg-opacity))
      }

      .bg-gray-200 {
        --tw-bg-opacity: 1;
        background-color: rgb(238 238 238/var(--tw-bg-opacity))
      }

      .bg-green-100 {
        --tw-bg-opacity: 1;
        background-color: rgb(200 230 201/var(--tw-bg-opacity))
      }

      .bg-green-700 {
        --tw-bg-opacity: 1;
        background-color: rgb(56 142 60/var(--tw-bg-opacity))
      }

      .bg-green-500 {
        --tw-bg-opacity: 1;
        background-color: rgb(76 175 80/var(--tw-bg-opacity))
      }

      .bg-green-800 {
        --tw-bg-opacity: 1;
        background-color: rgb(46 125 50/var(--tw-bg-opacity))
      }

      .bg-red-500 {
        --tw-bg-opacity: 1;
        background-color: rgb(244 67 54/var(--tw-bg-opacity))
      }

      .bg-\[\#bcff01\] {
        --tw-bg-opacity: 1;
        background-color: rgb(188 255 1/var(--tw-bg-opacity))
      }

      .bg-light-green-50 {
        --tw-bg-opacity: 1;
        background-color: rgb(241 248 233/var(--tw-bg-opacity))
      }

      .bg-inherit {
        background-color: inherit
      }

      .bg-blue-400 {
        --tw-bg-opacity: 1;
        background-color: rgb(66 165 245/var(--tw-bg-opacity))
      }

      .bg-base-300 {
        --tw-bg-opacity: 1;
        background-color: hsl(var(--b3, var(--b2))/var(--tw-bg-opacity))
      }

      .bg-green-300 {
        --tw-bg-opacity: 1;
        background-color: rgb(129 199 132/var(--tw-bg-opacity))
      }

      .bg-indigo-50 {
        --tw-bg-opacity: 1;
        background-color: rgb(232 234 246/var(--tw-bg-opacity))
      }

      .bg-opacity-75 {
        --tw-bg-opacity: 0.75
      }

      .bg-opacity-30 {
        --tw-bg-opacity: 0.3
      }

      .bg-opacity-50 {
        --tw-bg-opacity: 0.5
      }

      .bg-opacity-80 {
        --tw-bg-opacity: 0.8
      }

      .bg-opacity-70 {
        --tw-bg-opacity: 0.7
      }

      .bg-opacity-40 {
        --tw-bg-opacity: 0.4
      }

      .bg-opacity-10 {
        --tw-bg-opacity: 0.1
      }

      .bg-gradient-to-b {
        background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
      }

      .from-transparent {
        --tw-gradient-from: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent)
      }

      .from-green-200 {
        --tw-gradient-from: #a5d6a7;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(165, 214, 167, 0))
      }

      .from-green-100 {
        --tw-gradient-from: #c8e6c9;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(200, 230, 201, 0))
      }

      .to-gray-900 {
        --tw-gradient-to: #212121
      }

      .to-green-200 {
        --tw-gradient-to: #a5d6a7
      }

      .to-green-500 {
        --tw-gradient-to: #4caf50
      }

      .to-green-700 {
        --tw-gradient-to: #388e3c
      }

      .bg-cover {
        background-size: cover
      }

      .fill-current {
        fill: currentColor
      }

      .fill-blue-500 {
        fill: #2196f3
      }

      .fill-white {
        fill: #fff
      }

      .fill-black {
        fill: #000
      }

      .fill-red-700 {
        fill: #d32f2f
      }

      .fill-green-900 {
        fill: #1b5e20
      }

      .fill-green-800 {
        fill: #2e7d32
      }

      .fill-green-200 {
        fill: #a5d6a7
      }

      .object-cover {
        -o-object-fit: cover;
        object-fit: cover
      }

      .object-right {
        -o-object-position: right;
        object-position: right
      }

      .p-10 {
        padding: 2.5rem
      }

      .p-1 {
        padding: .25rem
      }

      .p-2 {
        padding: .5rem
      }

      .p-3 {
        padding: .75rem
      }

      .p-7 {
        padding: 1.75rem
      }

      .p-4 {
        padding: 1rem
      }

      .p-5 {
        padding: 1.25rem
      }

      .px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem
      }

      .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
      }

      .px-4 {
        padding-left: 1rem;
        padding-right: 1rem
      }

      .py-2 {
        padding-top: .5rem;
        padding-bottom: .5rem
      }

      .px-2 {
        padding-left: .5rem;
        padding-right: .5rem
      }

      .py-1 {
        padding-top: .25rem;
        padding-bottom: .25rem
      }

      .px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
      }

      .px-1 {
        padding-left: .25rem;
        padding-right: .25rem
      }

      .px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
      }

      .py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
      }

      .py-0\.5 {
        padding-top: .125rem;
        padding-bottom: .125rem
      }

      .py-0 {
        padding-top: 0;
        padding-bottom: 0
      }

      .py-\[5px\] {
        padding-top: 5px;
        padding-bottom: 5px
      }

      .px-8 {
        padding-left: 2rem;
        padding-right: 2rem
      }

      .pl-1 {
        padding-left: .25rem
      }

      .pl-4 {
        padding-left: 1rem
      }

      .pr-4 {
        padding-right: 1rem
      }

      .pb-6 {
        padding-bottom: 1.5rem
      }

      .pr-10 {
        padding-right: 2.5rem
      }

      .pt-3 {
        padding-top: .75rem
      }

      .pb-4 {
        padding-bottom: 1rem
      }

      .pt-1 {
        padding-top: .25rem
      }

      .pt-2 {
        padding-top: .5rem
      }

      .pt-4 {
        padding-top: 1rem
      }

      .pb-16 {
        padding-bottom: 4rem
      }

      .pl-12 {
        padding-left: 3rem
      }

      .pt-10 {
        padding-top: 2.5rem
      }

      .pb-8 {
        padding-bottom: 2rem
      }

      .pb-0 {
        padding-bottom: 0
      }

      .text-left {
        text-align: left
      }

      .text-center {
        text-align: center
      }

      .text-right {
        text-align: right
      }

      .align-top {
        vertical-align: top
      }

      .align-middle {
        vertical-align: middle
      }

      .align-bottom {
        vertical-align: bottom
      }

      .align-text-bottom {
        vertical-align: text-bottom
      }

      .font-torus {
        font-family: Torus, sans-serif, system-ui, -apple-system
      }

      .font-nova {
        font-family: Proxima Nova, sans-serif, system-ui, -apple-system
      }

      .font-sans {
        font-family: Roboto, sans-serif
      }

      .text-xl {
        font-size: 1.25rem
      }

      .text-lg,
      .text-xl {
        line-height: 1.75rem
      }

      .text-lg {
        font-size: 1.125rem
      }

      .text-xs {
        font-size: .75rem;
        line-height: 1rem
      }

      .text-base {
        font-size: 1rem;
        line-height: 1.5rem
      }

      .text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
      }

      .text-sm {
        font-size: .875rem;
        line-height: 1.25rem
      }

      .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
      }

      .font-bold {
        font-weight: 700
      }

      .font-thin {
        font-weight: 100
      }

      .font-black {
        font-weight: 900
      }

      .font-medium {
        font-weight: 500
      }

      .font-normal {
        font-weight: 400
      }

      .font-extrabold {
        font-weight: 800
      }

      .font-semibold {
        font-weight: 600
      }

      .uppercase {
        text-transform: uppercase
      }

      .normal-case {
        text-transform: none
      }

      .text-base-content {
        --tw-text-opacity: 1;
        color: hsl(var(--bc)/var(--tw-text-opacity))
      }

      .text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
      }

      .text-black {
        --tw-text-opacity: 1;
        color: rgb(0 0 0/var(--tw-text-opacity))
      }

      .text-blue-600 {
        --tw-text-opacity: 1;
        color: rgb(30 136 229/var(--tw-text-opacity))
      }

      .text-gray-800 {
        --tw-text-opacity: 1;
        color: rgb(66 66 74/var(--tw-text-opacity))
      }

      .text-\[\#4594d5\] {
        --tw-text-opacity: 1;
        color: rgb(69 148 213/var(--tw-text-opacity))
      }

      .text-gray-500 {
        --tw-text-opacity: 1;
        color: rgb(158 158 158/var(--tw-text-opacity))
      }

      .text-green-900 {
        --tw-text-opacity: 1;
        color: rgb(27 94 32/var(--tw-text-opacity))
      }

      .text-gray-600 {
        --tw-text-opacity: 1;
        color: rgb(117 117 117/var(--tw-text-opacity))
      }

      .text-red-700 {
        --tw-text-opacity: 1;
        color: rgb(211 47 47/var(--tw-text-opacity))
      }

      .text-blue-400 {
        --tw-text-opacity: 1;
        color: rgb(66 165 245/var(--tw-text-opacity))
      }

      .text-\[\#4f66a5\] {
        --tw-text-opacity: 1;
        color: rgb(79 102 165/var(--tw-text-opacity))
      }

      .text-\[\#4a9ae9\] {
        --tw-text-opacity: 1;
        color: rgb(74 154 233/var(--tw-text-opacity))
      }

      .text-\[\#d32d30\] {
        --tw-text-opacity: 1;
        color: rgb(211 45 48/var(--tw-text-opacity))
      }

      .text-\[\#469b2e\] {
        --tw-text-opacity: 1;
        color: rgb(70 155 46/var(--tw-text-opacity))
      }

      .text-\[\#468cc9\] {
        --tw-text-opacity: 1;
        color: rgb(70 140 201/var(--tw-text-opacity))
      }

      .text-gray-700 {
        --tw-text-opacity: 1;
        color: rgb(97 97 97/var(--tw-text-opacity))
      }

      .text-indigo-600 {
        --tw-text-opacity: 1;
        color: rgb(57 73 171/var(--tw-text-opacity))
      }

      .text-opacity-50 {
        --tw-text-opacity: 0.5
      }

      .underline {
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline
      }

      .no-underline {
        -webkit-text-decoration-line: none;
        text-decoration-line: none
      }

      .placeholder-green-200::-moz-placeholder {
        --tw-placeholder-opacity: 1;
        color: rgb(165 214 167/var(--tw-placeholder-opacity))
      }

      .placeholder-green-200::placeholder {
        --tw-placeholder-opacity: 1;
        color: rgb(165 214 167/var(--tw-placeholder-opacity))
      }

      .placeholder-green-800::-moz-placeholder {
        --tw-placeholder-opacity: 1;
        color: rgb(46 125 50/var(--tw-placeholder-opacity))
      }

      .placeholder-green-800::placeholder {
        --tw-placeholder-opacity: 1;
        color: rgb(46 125 50/var(--tw-placeholder-opacity))
      }

      .accent-blue-900 {
        accent-color: #0d47a1
      }

      .opacity-80 {
        opacity: .8
      }

      .shadow-xl {
        --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)
      }

      .shadow-2xl,
      .shadow-xl {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
        --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color)
      }

      .shadow-inner {
        --tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .05);
        --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color)
      }

      .shadow-inner,
      .shadow-lg {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .shadow-lg {
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
      }

      .shadow-sm {
        --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
      }

      .shadow,
      .shadow-sm {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .shadow {
        --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)
      }

      .ring-2 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
      }

      .ring-gray-500 {
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(158 158 158/var(--tw-ring-opacity))
      }

      .blur {
        --tw-blur: blur(8px)
      }

      .blur,
      .filter {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
      }

      .backdrop-blur {
        --tw-backdrop-blur: blur(8px)
      }

      .backdrop-blur,
      .backdrop-brightness-75 {
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
      }

      .backdrop-brightness-75 {
        --tw-backdrop-brightness: brightness(.75)
      }

      .backdrop-contrast-50 {
        --tw-backdrop-contrast: contrast(.5)
      }

      .backdrop-contrast-50,
      .backdrop-saturate-150 {
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
      }

      .backdrop-saturate-150 {
        --tw-backdrop-saturate: saturate(1.5)
      }

      .backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
      }

      .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .15s
      }

      .transition {
        transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .15s
      }

      .duration-500 {
        transition-duration: .5s
      }

      .duration-300 {
        transition-duration: .3s
      }

      .duration-200 {
        transition-duration: .2s
      }

      .ease-in-out {
        transition-timing-function: cubic-bezier(.4, 0, .2, 1)
      }

      @font-face {
        font-family: Montserrat-Regular;
        font-display: swap;
        src: url(/fonts/Montserrat-Regular.ttf)
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 400;
        src: url(/fonts/proxima-nova-regular-cyrillic.woff2) format("woff2"), url(/fonts/proxima-nova-regular-cyrillic.woff) format("woff");
        unicode-range: U+04??
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 400;
        src: url(/fonts/proxima-nova-regular-greek-coptic.woff2) format("woff2"), url(/fonts/proxima-nova-regular-greek-coptic.woff) format("woff");
        unicode-range: U+0370-03ff
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 400;
        src: url(/fonts/proxima-nova-regular-latin.woff2) format("woff2"), url(/fonts/proxima-nova-regular-latin.woff) format("woff");
        unicode-range: U+0020-007f, U+00a0-00ff
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 400;
        src: url(/fonts/proxima-nova-regular-latin-ext-a.woff2) format("woff2"), url(/fonts/proxima-nova-regular-latin-ext-a.woff) format("woff");
        unicode-range: U+0100-017f
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 400;
        src: url(/fonts/proxima-nova-regular-latin-ext-b.woff2) format("woff2"), url(/fonts/proxima-nova-regular-latin-ext-b.woff) format("woff");
        unicode-range: U+0180-024f
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 700;
        src: url(/fonts/proxima-nova-bold-cyrillic.woff2) format("woff2"), url(/fonts/proxima-nova-bold-cyrillic.woff) format("woff");
        unicode-range: U+04??
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 700;
        src: url(/fonts/proxima-nova-bold-greek-coptic.woff2) format("woff2"), url(/fonts/proxima-nova-bold-greek-coptic.woff) format("woff");
        unicode-range: U+0370-03ff
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 700;
        src: url(/fonts/proxima-nova-bold-latin.woff2) format("woff2"), url(/fonts/proxima-nova-bold-latin.woff) format("woff");
        unicode-range: U+0020-007f, U+00a0-00ff
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 700;
        src: url(/fonts/proxima-nova-bold-latin-ext-a.woff2) format("woff2"), url(/fonts/proxima-nova-bold-latin-ext-a.woff) format("woff");
        unicode-range: U+0100-017f
      }

      @font-face {
        font-display: swap;
        font-family: Proxima Nova;
        font-weight: 700;
        src: url(/fonts/proxima-nova-bold-latin-ext-b.woff2) format("woff2"), url(/fonts/proxima-nova-bold-latin-ext-b.woff) format("woff");
        unicode-range: U+0180-024f
      }

      @font-face {
        font-display: swap;
        font-family: Torus;
        font-weight: 700;
        src: url(/fonts/torus-bold-latin.woff2) format("woff2"), url(/fonts/torus-bold-latin.woff) format("woff");
        unicode-range: U+0020-007f, U+00a0-00ff
      }

      @font-face {
        font-display: swap;
        font-family: Torus;
        font-weight: 700;
        src: url(/fonts/torus-bold-latin-ext-a.woff2) format("woff2"), url(/fonts/torus-bold-latin-ext-a.woff) format("woff");
        unicode-range: U+0100-017f
      }

      @font-face {
        font-display: swap;
        font-family: Torus;
        font-weight: 700;
        src: url(/fonts/torus-bold-latin-ext-b.woff2) format("woff2"), url(/fonts/torus-bold-latin-ext-b.woff) format("woff");
        unicode-range: U+0180-024f
      }

      .w40 {
        width: 40px;
        height: 40px;
        cursor: pointer
      }

      .cardFootRightItem {
        display: flex;
        flex-direction: column
      }

      .cardFootRightBottom {
        height: 25px;
        text-align: center
      }

      body {
        font-family: Proxima Nova, sans-serif, system-ui, -apple-system
      }

      .container {
        position: relative
      }

      .leftAdvertisement {
        left: -180px
      }

      .leftAdvertisement,
      .rightAdvertisement {
        position: absolute;
        top: 30px;
        width: 160px;
        height: 600px
      }

      .rightAdvertisement {
        right: -180px
      }

      .bottomAdvertisement {
        width: 100%;
        min-height: 50px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center
      }

      @media only screen and (min-width:768px) {
        .redRadiu {
          background-color: #ff5501
        }

        .redRadiu,
        .yellowRadiu {
          width: 20px;
          height: 20px;
          border: 1.5px solid #000;
          border-radius: 50%;
          margin-left: 6px
        }

        .yellowRadiu {
          background-color: #f8ff00
        }

        .greenRadiu {
          width: 20px;
          height: 20px;
          border: 1.5px solid #000;
          background-color: #bcff01;
          border-radius: 50%;
          margin-left: 6px
        }

        .cardImgBox2 .cardImgTitle {
          font-size: 16px
        }

        .cardImgBox3 .cardImgTitle {
          font-size: 24px
        }

        .card-wrap:hover {
          transform: scale(1.1);
          transition: all .3s linear
        }

        .card-wrap:hover>.game-name {
          display: block
        }

        .father .cardImgBox:hover {
          transform: scale(1.03) translateY(-4px)
        }

        .cardImgTitle {
          display: none;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background: rgba(0, 0, 0, .5);
          color: #fff;
          font-size: 12px;
          height: 50%;
          align-items: center;
          justify-content: center;
          border-radius: 0 0 10px 10px;
          text-align: center
        }

        .cardImgBox:hover>.cardImgTitle,
        .gameScreen {
          display: flex
        }

        .gameScreen {
          width: 100%;
          overflow: hidden;
          flex-direction: row
        }

        .isPhone {
          display: none
        }

        .isPc {
          display: block
        }

        .isPcFlex {
          display: flex
        }

        .plr120 {
          padding-left: 120px;
          padding-right: 120px
        }

        .QABox {
          background: #bcff01;
          padding: 60px 120px
        }

        .gameScreenLeft {
          padding: 20px;
          display: inline-block;
          width: calc(100% - 240px)
        }

        .iframe {
          border-radius: 0
        }

        .gameScreenRight {
          width: 240px;
          height: inherit;
          background: #e7e7e7;
          display: inline-block;
          border-left: 1px solid #000
        }

        .bottomRecommendPhone {
          display: flex;
          flex-direction: column
        }

        .bottomRecommend {
          display: flex;
          justify-content: space-around;
          margin-top: 15px;
          align-items: center
        }

        .bottomRecommendImgFirst {
          grid-area: 1/4/1/1;
          display: flex;
          align-items: center
        }

        .bottomRecommendImg {
          --minSize: 94px;
          min-width: var(--minSize);
          min-height: var(--minSize);
          border: 1px solid #000;
          border-radius: 5px
        }

        .rightRecommend {
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          grid-gap: 15px
        }

        .rightRecommendImgFirst {
          flex-direction: column;
          margin: 30px 0
        }

        .rightRecommendImgFirst,
        .rightRecommendImgFirstDiv1 {
          display: flex;
          align-items: center;
          justify-content: center
        }

        .rightRecommendImgFirstDiv1 {
          border: 3px solid #000;
          width: 80%;
          height: 60px;
          font-size: 24px;
          font-weight: 800;
          background: #bcff01;
          cursor: pointer
        }

        .rightRecommendImgFirstDiv1Img {
          width: 25px;
          height: 25px;
          margin-right: 7px
        }

        .rightRecommendImg {
          --minSize: 94px;
          min-width: var(--minSize);
          min-height: var(--minSize);
          border: 1px solid #000;
          border-radius: 5px
        }
      }

      @media (min-width:600px) and (max-width:1400px) {
        .plr120 {
          padding-left: 30px;
          padding-right: 30px
        }

        .bottomRecommend {
          flex-direction: column
        }

        .bottomRecommendImgFirstDiv {
          margin-bottom: 15px
        }

        .banner {
          font-size: 12px
        }
      }

      .section {
        box-shadow: 5px 6px 0 0 #000;
        border: 1px solid #000;
        width: 95%;
        height: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center
      }

      @media only screen and (max-width:768px) {
        .redRadiu {
          background-color: #ff5501
        }

        .redRadiu,
        .yellowRadiu {
          width: 20px;
          height: 20px;
          border: 1.5px solid #000;
          border-radius: 50%;
          margin-left: 6px
        }

        .yellowRadiu {
          background-color: #f8ff00
        }

        .greenRadiu {
          width: 20px;
          height: 20px;
          border: 1.5px solid #000;
          background-color: #bcff01;
          border-radius: 50%;
          margin-left: 6px
        }

        .cardImgTitle {
          display: none
        }

        .section {
          box-shadow: 5px 6px 0 0 #000;
          border: 1px solid #000;
          width: 95%;
          height: 75%;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center
        }

        .gameScreen {
          display: flex;
          width: 100%;
          overflow: hidden;
          flex-direction: column
        }

        .gameScreenLeft {
          display: inline-block;
          width: 100%
        }

        .QABox {
          background: #bcff01;
          padding: 0
        }

        .isPhone {
          display: block
        }

        .isPc,
        .isPcFlex {
          display: none
        }
      }

      .scrollX {
        overflow-x: scroll
      }

      .scrollY {
        overflow-y: scroll
      }

      .pdlr20 {
        padding: 0 20px
      }

      ::-webkit-scrollbar {
        display: none
      }

      .avatar {
        cursor: pointer
      }

      .bg-primary {
        background-color: #65c3c8
      }

      .currentGame {
        position: relative;
        border-radius: 8px;
        width: 314px;
        height: 314px;
        margin: 0 auto
      }

      .currentGameBg {
        width: 100%;
        height: 100%;
        border-radius: 8px
      }

      .playBox {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 20
      }

      .wh25 {
        width: 25px;
        height: 25px
      }

      .gameContainer {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background-color: #fff;
        z-index: 10000
      }

      .backBox {
        width: 40px;
        height: 27px;
        border-radius: 0 6px 6px 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 30px
      }

      .wh20 {
        width: 20px;
        height: 20px
      }

      .wh-tread {
        width: 18px;
        height: 22px
      }

      .wh22 {
        width: 22px;
        height: 22px
      }

      .btn-circle {
        border-radius: 50%;
        width: 50px;
        height: 50px
      }

      .rightBox {
        align-items: center;
        width: 130px
      }

      .rightBox,
      .supportBox {
        display: flex;
        justify-content: space-between
      }

      .supportBox {
        flex-direction: row;
        width: 60px;
        color: #fff
      }

      .supportItem {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        align-items: center
      }

      .supportItem span {
        font-size: 12px;
        color: #000
      }

      .wh-tread-yes {
        width: 18px;
        height: 22px
      }

      .has-click {
        color: #55dbf9
      }

      @media (max-width:788px) {
        .game-page .game-warp {
          width: 688px !important;
          margin: 0 auto
        }
      }

      @media (min-width:700px) {
        .game-warp .game-area .game-main .game-attr .game-action .game-hated {
          margin-right: 25px
        }
      }

      @media (max-width:700px) {
        .game-attr .game-info {
          flex-grow: 1
        }

        .game-attr .game-info h1 {
          overflow: hidden;
          text-overflow: ellipsis
        }

        .game-page .game-warp {
          width: 488px !important;
          margin: 0 auto
        }

        .game-page .game-warp .game-area .game-main {
          grid-area: 2/1/6/6 !important
        }
      }

      @media (min-width:600px) and (max-width:700px) {
        .game-page .game-warp .game-area .game-main {
          margin: 0 -30px
        }
      }

      @media (max-width:500px) {
        .game-attr .game-action .like-hated {
          display: none
        }

        .game-page .game-warp {
          width: 388px !important;
          margin: 0 auto
        }

        .game-page .game-warp .game-area .game-main {
          grid-area: 2/1/6/5 !important
        }
      }

      @media (max-width:400px) {
        .game-page .game-warp {
          width: 288px !important;
          margin: 0 auto
        }

        .game-page .game-warp .game-area .game-main {
          grid-area: 2/1/6/4 !important
        }
      }

      @media (min-width:360px) and (max-width:400px) {
        .game-page .game-warp .game-area .game-main {
          margin: 0 -20px
        }
      }

      @media (max-width:500px) {
        .about-area .about-content h2 {
          margin-bottom: 5px !important
        }

        .about-area .about-content {
          padding: 20px 15px !important
        }
      }

      .game-full-back {
        display: none;
        width: 44px;
        height: 34px;
        position: fixed;
        left: 0;
        top: 70px;
        z-index: 99;
        background: #fff;
        box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .76);
        border-radius: 0 30px 30px 0;
        line-height: 34px;
        padding-left: 10px
      }

      .game-gray-wrapper {
        background-color: rgba(0, 0, 0, .2);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10
      }

      .game-core {
        position: relative
      }

      .search-go-back {
        display: none !important
      }

      .icon-delete {
        display: none
      }

      @media (max-width:400px) {
        .search-go-back {
          display: block !important
        }

        .search-go-back i {
          width: 40px;
          padding: 0 10px;
          line-height: 68px;
          color: #16e3ff
        }

        .game-search.pc-expand {
          position: absolute;
          width: 100vw !important
        }

        .game-search.pc-expand .search-bg {
          box-shadow: none !important
        }
      }

      .game-area {
        display: grid;
        grid-template-rows: repeat(auto-fill, 94px);
        grid-gap: 13px;
        grid-auto-flow: dense;
        justify-content: center;
        margin: 16px auto 0;
        padding: 0;
        list-style-type: none;
        --gridTemplateColumns: 10;
        grid-template-columns: repeat(var(--gridTemplateColumns), 94px)
      }

      .game-card {
        --minSize: 94px;
        min-width: var(--minSize);
        min-height: var(--minSize)
      }

      .game-card:first-child {
        grid-area: 1/3/1/1
      }

      .game-card:nth-child(5) {
        grid-area: 2/3/3/3
      }

      .game-card-first {
        box-shadow: 7px 6px 0 2px #000;
        border: 1px solid #000;
        width: 100%;
        height: 68px;
        display: flex;
        justify-content: center;
        align-items: center
      }

      .card-wrap {
        overflow: hidden;
        cursor: pointer;
        transform: scale(1) translate(0);
        transition-duration: .3s;
        border-radius: 4px;
        width: 100%;
        height: 100%;
        border: 1px solid #000
      }

      .game-name {
        display: none;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        text-align: center;
        align-items: center;
        background: rgba(0, 0, 0, .5);
        color: #fff;
        height: 50%;
        font-size: 14px
      }

      .game-ele {
        width: 100%;
        height: 100%
      }

      .game-page {
        background-image: url(/images/img-bg.png);
        background-repeat: no-repeat;
        background-position: top;
        background-size: 100% 894px;
        padding-top: 92px
      }

      a,
      a:active,
      a:hover,
      a:link,
      a:visited {
        text-decoration: none
      }

      body {
        margin: 0
      }

      #game-iframe {
        width: 100%;
        height: 100%
      }

      .game-card-box {
        height: 110px;
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        padding: 10px;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;
        white-space: nowrap
      }

      .game-card-scroll .game-card {
        display: inline-block;
        margin-right: 10px
      }

      .item-wrap {
        overflow: hidden;
        border-radius: 7px;
        box-shadow: 0 4px 6px 1px rgba(0, 0, 0, .3);
        cursor: pointer;
        transform: scale(1) translate(0);
        transition-duration: .3s;
        height: 88px;
        margin-bottom: 12px;
        display: flex;
        background: #fff
      }

      .game-list {
        padding: 30px 15px
      }

      .item-ele {
        width: 88px;
        height: 88px
      }

      .item-content {
        display: flex;
        flex-direction: column;
        padding: 5px 10px;
        color: #000;
        border-left: 1px solid #999
      }

      .item-title {
        height: 25px;
        font-weight: 600;
        font-size: 19px;
        margin-top: 4px
      }

      .item-desc {
        font-size: 12px;
        color: #999;
        line-height: 150%;
        width: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        margin-top: 6px;
        letter-spacing: .5px
      }

      @media only screen and (min-width:768px) {
        .box-pc {
          display: grid
        }

        .box-phone {
          display: none
        }
      }

      @media only screen and (max-width:768px) {
        .box-pc {
          display: none
        }

        .box-phone {
          display: block
        }
      }

      .flex,
      .nav {
        display: flex
      }

      .nav {
        padding: 0 120px;
        height: 90px;
        justify-content: space-between;
        align-items: center
      }

      .nav .left {
        display: flex;
        height: 1px
      }

      .nav .img1 {
        width: 60px;
        height: 60px
      }

      .nav .img1,
      .nav .img2 {
        -o-object-fit: contain;
        object-fit: contain
      }

      .nav .img2 {
        width: 258px;
        height: 50px
      }

      .nav .inputBox {
        width: 593px;
        height: 50px;
        border: 1px solid #000;
        background-color: #fff;
        padding: 0 10px;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 20
      }

      .nav .inputBox img {
        width: 36px;
        height: 36px
      }

      .nav .inputBox input {
        width: 100%;
        height: 36px;
        padding-left: 10px;
        border: 0
      }

      .nav .inputBox input:focus {
        outline: none
      }

      .banner {
        background: #bcff01;
        color: #000;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center
      }

      .father {
        position: relative;
        margin: 0 auto
      }

      .cardImg {
        position: absolute;
        border: 1px solid #000;
        border-radius: 5px;
        width: 100%;
        height: 100%
      }

      .father .cardImgBox {
        cursor: pointer;
        border-radius: 5px;
        transition: .3s
      }

      .mdBox {
        margin: 0 auto;
        padding: 40px 20px
      }

      .QAText {
        color: #303443;
        font-weight: unset
      }

      .nextui-modal {
        border-radius: 0 !important;
        padding-top: 0 !important
      }

      .dialogHead {
        display: flex;
        border-bottom: 2px solid #000;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        height: 45px
      }

      .dialogHead img {
        width: 30px;
        height: 30px
      }

      .dialogBody {
        padding: 10px;
        min-height: 200px
      }

      body,
      html {
        width: 100% !important
      }

      .gamesBox {
        margin: 0 auto
      }

      .flexCenter {
        display: flex;
        justify-content: center;
        align-items: center
      }

      .placeholder\:overflow-ellipsis::-moz-placeholder {
        text-overflow: ellipsis
      }

      .placeholder\:overflow-ellipsis::placeholder {
        text-overflow: ellipsis
      }

      .placeholder\:text-black::-moz-placeholder {
        --tw-text-opacity: 1;
        color: rgb(0 0 0/var(--tw-text-opacity))
      }

      .placeholder\:text-black::placeholder {
        --tw-text-opacity: 1;
        color: rgb(0 0 0/var(--tw-text-opacity))
      }

      .hover\:w-44:hover {
        width: 11rem
      }

      .hover\:scale-125:hover {
        --tw-scale-x: 1.25;
        --tw-scale-y: 1.25
      }

      .hover\:scale-110:hover,
      .hover\:scale-125:hover {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .hover\:scale-110:hover {
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1
      }

      .hover\:transform-none:hover {
        transform: none
      }

      .hover\:cursor-pointer:hover {
        cursor: pointer
      }

      .hover\:bg-gray-400:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(189 189 189/var(--tw-bg-opacity))
      }

      .hover\:bg-inherit:hover {
        background-color: inherit
      }

      .hover\:bg-blue-700:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(25 118 210/var(--tw-bg-opacity))
      }

      .hover\:bg-gray-50:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(250 250 250/var(--tw-bg-opacity))
      }

      .hover\:text-blue-500:hover {
        --tw-text-opacity: 1;
        color: rgb(33 150 243/var(--tw-text-opacity))
      }

      .hover\:shadow-2xl:hover {
        --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
        --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
      }

      .hover\:ring-blue-500:hover {
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(33 150 243/var(--tw-ring-opacity))
      }

      .hover\:brightness-200:hover {
        --tw-brightness: brightness(2)
      }

      .hover\:brightness-150:hover,
      .hover\:brightness-200:hover {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
      }

      .hover\:brightness-150:hover {
        --tw-brightness: brightness(1.5)
      }

      .hover\:brightness-125:hover {
        --tw-brightness: brightness(1.25);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
      }

      .focus\:z-20:focus {
        z-index: 20
      }

      .focus\:border-green-800:focus {
        --tw-border-opacity: 1;
        border-color: rgb(46 125 50/var(--tw-border-opacity))
      }

      .group:hover .group-hover\:block {
        display: block
      }

      .group:hover .group-hover\:h-\[204px\] {
        height: 204px
      }

      .group:hover .group-hover\:animate-none {
        animation: none
      }

      .group:hover .group-hover\:overflow-x-visible {
        overflow-x: visible
      }

      .group:hover .group-hover\:pl-4 {
        padding-left: 1rem
      }

      @media (min-width:540px) {
        .sm\:m-2 {
          margin: .5rem
        }

        .sm\:mx-1 {
          margin-left: .25rem;
          margin-right: .25rem
        }

        .sm\:block {
          display: block
        }

        .sm\:flex {
          display: flex
        }

        .sm\:w-14 {
          width: 3.5rem
        }

        .sm\:flex-1 {
          flex: 1 1 0%
        }

        .sm\:grid-cols-6 {
          grid-template-columns: repeat(6, minmax(0, 1fr))
        }

        .sm\:grid-cols-5 {
          grid-template-columns: repeat(5, minmax(0, 1fr))
        }

        .sm\:items-center {
          align-items: center
        }

        .sm\:p-2 {
          padding: .5rem
        }

        .sm\:px-4 {
          padding-left: 1rem;
          padding-right: 1rem
        }

        .sm\:px-2 {
          padding-left: .5rem;
          padding-right: .5rem
        }

        .sm\:text-xl {
          font-size: 1.25rem;
          line-height: 1.75rem
        }
      }

      @media (min-width:720px) {
        .md\:m-2 {
          margin: .5rem
        }

        .md\:m-4 {
          margin: 1rem
        }

        .md\:mx-4 {
          margin-left: 1rem;
          margin-right: 1rem
        }

        .md\:block {
          display: block
        }

        .md\:flex {
          display: flex
        }

        .md\:contents {
          display: contents
        }

        .md\:hidden {
          display: none
        }

        .md\:w-16 {
          width: 4rem
        }

        .md\:w-\[640px\] {
          width: 640px
        }

        .md\:flex-1 {
          flex: 1 1 0%
        }

        .md\:flex-none {
          flex: none
        }

        .md\:grid-cols-8 {
          grid-template-columns: repeat(8, minmax(0, 1fr))
        }

        .md\:grid-cols-7 {
          grid-template-columns: repeat(7, minmax(0, 1fr))
        }

        .md\:place-self-center {
          place-self: center
        }

        .md\:justify-self-end {
          justify-self: end
        }

        .md\:p-16 {
          padding: 4rem
        }

        .md\:px-4 {
          padding-left: 1rem;
          padding-right: 1rem
        }

        .md\:text-sm {
          font-size: .875rem;
          line-height: 1.25rem
        }
      }

      @media (min-width:960px) {
        .lg\:absolute {
          position: absolute
        }

        .lg\:right-24 {
          right: 6rem
        }

        .lg\:right-0 {
          right: 0
        }

        .lg\:top-1\/2 {
          top: 50%
        }

        .lg\:left-1\/2 {
          left: 50%
        }

        .lg\:contents {
          display: contents
        }

        .lg\:hidden {
          display: none
        }

        .lg\:-translate-x-1\/2 {
          --tw-translate-x: -50%
        }

        .lg\:-translate-x-1\/2,
        .lg\:-translate-y-1\/2 {
          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }

        .lg\:-translate-y-1\/2 {
          --tw-translate-y: -50%
        }

        .lg\:grid-cols-10 {
          grid-template-columns: repeat(10, minmax(0, 1fr))
        }

        .lg\:grid-cols-6 {
          grid-template-columns: repeat(6, minmax(0, 1fr))
        }

        .lg\:grid-cols-9 {
          grid-template-columns: repeat(9, minmax(0, 1fr))
        }
      }

      @media (min-width:1140px) {
        .xl\:block {
          display: block
        }

        .xl\:contents {
          display: contents
        }

        .xl\:grid-cols-12 {
          grid-template-columns: repeat(12, minmax(0, 1fr))
        }

        .xl\:grid-cols-8 {
          grid-template-columns: repeat(8, minmax(0, 1fr))
        }
      }

      @media (min-width:1320px) {
        .\32xl\:grid-cols-10 {
          grid-template-columns: repeat(10, minmax(0, 1fr))
        }
      }

      .PageLoader_lds-ellipsis__C6ThW {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px
      }

      .PageLoader_lds-ellipsis__C6ThW div {
        position: absolute;
        top: 33px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #fff;
        animation-timing-function: cubic-bezier(0, 1, 1, 0)
      }

      .PageLoader_lds-ellipsis__C6ThW div:first-child {
        left: 8px;
        animation: PageLoader_lds-ellipsis1__wjuY6 .6s infinite
      }

      .PageLoader_lds-ellipsis__C6ThW div:nth-child(2) {
        left: 8px;
        animation: PageLoader_lds-ellipsis2__L3zCU .6s infinite
      }

      .PageLoader_lds-ellipsis__C6ThW div:nth-child(3) {
        left: 32px;
        animation: PageLoader_lds-ellipsis2__L3zCU .6s infinite
      }

      .PageLoader_lds-ellipsis__C6ThW div:nth-child(4) {
        left: 56px;
        animation: PageLoader_lds-ellipsis3__AoMUd .6s infinite
      }

      @keyframes PageLoader_lds-ellipsis1__wjuY6 {
        0% {
          transform: scale(0)
        }

        to {
          transform: scale(1)
        }
      }

      @keyframes PageLoader_lds-ellipsis3__AoMUd {
        0% {
          transform: scale(1)
        }

        to {
          transform: scale(0)
        }
      }

      @keyframes PageLoader_lds-ellipsis2__L3zCU {
        0% {
          transform: translate(0)
        }

        to {
          transform: translate(24px)
        }
      }
    
    
      #GameSection_fire-label-wrapper__0xa8G:before {
        content: "";
        background: #fff;
        width: 4px;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: -4px;
        z-index: 0
      }

      #GameSection_fire-label-wrapper__0xa8G:after {
        content: "";
        background: #bac9de;
        width: 6px;
        height: 8px;
        border-radius: 4px 0 0 4px;
        position: absolute;
        left: 0;
        z-index: 1
      }

      .MobileHeader_searchBox__YmnfL {
        position: absolute;
        left: 0;
        height: calc(100vh - 64px);
        border-top: 0;
        z-index: 20;
        padding: 15px;
        width: 100%;
        overflow-y: auto
      }

      .MobileHeader_nav__16Ipf {
        position: absolute;
        background: #fff;
        width: 100%
      }

      .MobileHeader_navItem__fdtqV {
        height: 45px;
        display: inline-block;
        line-height: 45px;
        padding-left: 15px
      }

      .MobileHeader_mask__5M0MB {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 10
      }

      .MobileHeader_searchMsg__hp3Hf {
        font-size: 16px;
        font-weight: 800;
        color: #000;
        padding: 10px
      }

      .MobileHeader_searchResult__k3_Yl {
        display: flex;
        flex-wrap: wrap
      }

      .MobileHeader_searchResultMobile__H8u_Z {
        flex-direction: column;
        flex-wrap: nowrap
      }

      .MobileHeader_searchIcon__EYCIl {
        width: 62px !important;
        height: 62px !important;
        border-radius: 4px;
        border: 1px solid #000;
        margin-bottom: 8px;
        margin-right: 8px;
        cursor: pointer
      }

      .MobileHeader_header__BdzUZ {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 45px;
        z-index: 20;
        background-color: #fff
      }

      .MobileHeader_innerHeader__VEFCw {
        align-items: center;
        justify-content: space-between;
        right: 0;
        z-index: 20;
        width: 100%
      }