:root {
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: #e74c3c;
    --toastify-color-transparent: hsla(0, 0%, 100%, .7);
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-toast-width: 320px;
    --toastify-toast-background: #fff;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error)
}

.Toastify__toast-container {
    z-index: var(--toastify-z-index);
    -webkit-transform: translateZ(var(--toastify-z-index));
    position: fixed;
    padding: 4px;
    width: var(--toastify-toast-width);
    box-sizing: border-box;
    color: #fff
}

.Toastify__toast-container--top-left {
    top: 1em;
    left: 1em
}

.Toastify__toast-container--top-center {
    top: 1em;
    left: 50%;
    transform: translateX(-50%)
}

.Toastify__toast-container--top-right {
    top: 1em;
    right: 1em
}

.Toastify__toast-container--bottom-left {
    bottom: 1em;
    left: 1em
}

.Toastify__toast-container--bottom-center {
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%)
}

.Toastify__toast-container--bottom-right {
    bottom: 1em;
    right: 1em
}

@media only screen and (max-width:480px) {
    .Toastify__toast-container {
        width: 100vw;
        padding: 0;
        left: 0;
        margin: 0
    }
    .Toastify__toast-container--top-center,
    .Toastify__toast-container--top-left,
    .Toastify__toast-container--top-right {
        top: 0;
        transform: translateX(0)
    }
    .Toastify__toast-container--bottom-center,
    .Toastify__toast-container--bottom-left,
    .Toastify__toast-container--bottom-right {
        bottom: 0;
        transform: translateX(0)
    }
    .Toastify__toast-container--rtl {
        right: 0;
        left: auto
    }
}

.Toastify__toast {
    position: relative;
    min-height: var(--toastify-toast-min-height);
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05);
    display: flex;
    justify-content: space-between;
    max-height: var(--toastify-toast-max-height);
    overflow: hidden;
    font-family: var(--toastify-font-family);
    cursor: default;
    direction: ltr;
    z-index: 0
}

.Toastify__toast--rtl {
    direction: rtl
}

.Toastify__toast--close-on-click {
    cursor: pointer
}

.Toastify__toast-body {
    margin: auto 0;
    flex: 1 1 auto;
    padding: 6px;
    display: flex;
    align-items: center
}

.Toastify__toast-body>div:last-child {
    word-break: break-word;
    flex: 1
}

.Toastify__toast-icon {
    -webkit-margin-end: 10px;
    margin-inline-end: 10px;
    width: 20px;
    flex-shrink: 0;
    display: flex
}

.Toastify--animate {
    animation-fill-mode: both;
    animation-duration: .7s
}

.Toastify--animate-icon {
    animation-fill-mode: both;
    animation-duration: .3s
}

@media only screen and (max-width:480px) {
    .Toastify__toast {
        margin-bottom: 0;
        border-radius: 0
    }
}

.Toastify__toast-theme--dark {
    background: var(--toastify-color-dark);
    color: var(--toastify-text-color-dark)
}

.Toastify__toast-theme--colored.Toastify__toast--default,
.Toastify__toast-theme--light {
    background: var(--toastify-color-light);
    color: var(--toastify-text-color-light)
}

.Toastify__toast-theme--colored.Toastify__toast--info {
    color: var(--toastify-text-color-info);
    background: var(--toastify-color-info)
}

.Toastify__toast-theme--colored.Toastify__toast--success {
    color: var(--toastify-text-color-success);
    background: var(--toastify-color-success)
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
    color: var(--toastify-text-color-warning);
    background: var(--toastify-color-warning)
}

.Toastify__toast-theme--colored.Toastify__toast--error {
    color: var(--toastify-text-color-error);
    background: var(--toastify-color-error)
}

.Toastify__progress-bar-theme--light {
    background: var(--toastify-color-progress-light)
}

.Toastify__progress-bar-theme--dark {
    background: var(--toastify-color-progress-dark)
}

.Toastify__progress-bar--info {
    background: var(--toastify-color-progress-info)
}

.Toastify__progress-bar--success {
    background: var(--toastify-color-progress-success)
}

.Toastify__progress-bar--warning {
    background: var(--toastify-color-progress-warning)
}

.Toastify__progress-bar--error {
    background: var(--toastify-color-progress-error)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
    background: var(--toastify-color-transparent)
}

.Toastify__close-button {
    color: #fff;
    background: transparent;
    outline: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: .7;
    transition: .3s ease;
    align-self: flex-start
}

.Toastify__close-button--light {
    color: #000;
    opacity: .3
}

.Toastify__close-button>svg {
    fill: currentColor;
    height: 16px;
    width: 14px
}

.Toastify__close-button:focus,
.Toastify__close-button:hover {
    opacity: 1
}

@keyframes Toastify__trackProgress {
    0% {
        transform: scaleX(1)
    }
    to {
        transform: scaleX(0)
    }
}

.Toastify__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: var(--toastify-z-index);
    opacity: .7;
    transform-origin: left
}

.Toastify__progress-bar--animated {
    animation: Toastify__trackProgress linear 1 forwards
}

.Toastify__progress-bar--controlled {
    transition: transform .2s
}

.Toastify__progress-bar--rtl {
    right: 0;
    left: auto;
    transform-origin: right
}

.Toastify__spinner {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid;
    border-radius: 100%;
    border-color: var(--toastify-spinner-color-empty-area);
    border-right-color: var(--toastify-spinner-color);
    animation: Toastify__spin .65s linear infinite
}

@keyframes Toastify__bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes Toastify__bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes Toastify__bounceInUp {
    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    75% {
        transform: translate3d(0, 10px, 0)
    }
    90% {
        transform: translate3d(0, -5px, 0)
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes Toastify__bounceInDown {
    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }
    75% {
        transform: translate3d(0, -10px, 0)
    }
    90% {
        transform: translate3d(0, 5px, 0)
    }
    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0)
    }
    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.Toastify__bounce-enter--bottom-left,
.Toastify__bounce-enter--top-left {
    animation-name: Toastify__bounceInLeft
}

.Toastify__bounce-enter--bottom-right,
.Toastify__bounce-enter--top-right {
    animation-name: Toastify__bounceInRight
}

.Toastify__bounce-enter--top-center {
    animation-name: Toastify__bounceInDown
}

.Toastify__bounce-enter--bottom-center {
    animation-name: Toastify__bounceInUp
}

.Toastify__bounce-exit--bottom-left,
.Toastify__bounce-exit--top-left {
    animation-name: Toastify__bounceOutLeft
}

.Toastify__bounce-exit--bottom-right,
.Toastify__bounce-exit--top-right {
    animation-name: Toastify__bounceOutRight
}

.Toastify__bounce-exit--top-center {
    animation-name: Toastify__bounceOutUp
}

.Toastify__bounce-exit--bottom-center {
    animation-name: Toastify__bounceOutDown
}

@keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

.Toastify__zoom-enter {
    animation-name: Toastify__zoomIn
}

.Toastify__zoom-exit {
    animation-name: Toastify__zoomOut
}

@keyframes Toastify__flipIn {
    0% {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in
    }
    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }
    80% {
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        transform: perspective(400px)
    }
}

@keyframes Toastify__flipOut {
    0% {
        transform: perspective(400px)
    }
    30% {
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }
    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.Toastify__flip-enter {
    animation-name: Toastify__flipIn
}

.Toastify__flip-exit {
    animation-name: Toastify__flipOut
}

@keyframes Toastify__slideInRight {
    0% {
        transform: translate3d(110%, 0, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        transform: translate3d(-110%, 0, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        transform: translate3d(0, 110%, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        transform: translate3d(0, -110%, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(110%, 0, 0)
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(-110%, 0, 0)
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(0, 500px, 0)
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(0, -500px, 0)
    }
}

.Toastify__slide-enter--bottom-left,
.Toastify__slide-enter--top-left {
    animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--bottom-right,
.Toastify__slide-enter--top-right {
    animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
    animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
    animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--bottom-left,
.Toastify__slide-exit--top-left {
    animation-name: Toastify__slideOutLeft
}

.Toastify__slide-exit--bottom-right,
.Toastify__slide-exit--top-right {
    animation-name: Toastify__slideOutRight
}

.Toastify__slide-exit--top-center {
    animation-name: Toastify__slideOutUp
}

.Toastify__slide-exit--bottom-center {
    animation-name: Toastify__slideOutDown
}

@keyframes Toastify__spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.flipdown.flipdown__theme-dark {
    font-family: sans-serif;
    font-weight: 700
}

.flipdown.flipdown__theme-dark .rotor-group-heading:before {
    color: #000
}

.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):after,
.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):before {
    background-color: #151515
}

.flipdown.flipdown__theme-dark .rotor,
.flipdown.flipdown__theme-dark .rotor-leaf-front,
.flipdown.flipdown__theme-dark .rotor-top {
    color: #fff;
    background-color: #151515
}

.flipdown.flipdown__theme-dark .rotor-bottom,
.flipdown.flipdown__theme-dark .rotor-leaf-rear {
    color: #efefef;
    background-color: #202020
}

.flipdown.flipdown__theme-dark .rotor:after {
    border-top: 1px solid #151515
}

.flipdown.flipdown__theme-light {
    font-family: sans-serif;
    font-weight: 700
}

.flipdown.flipdown__theme-light .rotor-group-heading:before {
    color: #eee
}

.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):after,
.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):before {
    background-color: #ddd
}

.flipdown.flipdown__theme-light .rotor,
.flipdown.flipdown__theme-light .rotor-leaf-front,
.flipdown.flipdown__theme-light .rotor-top {
    color: #222;
    background-color: #ddd
}

.flipdown.flipdown__theme-light .rotor-bottom,
.flipdown.flipdown__theme-light .rotor-leaf-rear {
    color: #333;
    background-color: #eee
}

.flipdown.flipdown__theme-light .rotor:after {
    border-top: 1px solid #222
}

.flipdown {
    overflow: visible;
    width: 510px;
    height: 110px
}

.flipdown .rotor-group {
    position: relative;
    float: left;
    padding-right: 30px
}

.flipdown .rotor-group:last-child {
    padding-right: 0
}

.flipdown .rotor-group-heading:before {
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center
}

.flipdown .rotor-group:first-child .rotor-group-heading:before,
.flipdown .rotor-group:nth-child(2) .rotor-group-heading:before,
.flipdown .rotor-group:nth-child(3) .rotor-group-heading:before,
.flipdown .rotor-group:nth-child(4) .rotor-group-heading:before {
    content: attr(data-before)
}

.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 115px;
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    content: "";
    position: absolute;
    bottom: 50px;
    left: 115px;
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.flipdown .rotor {
    position: relative;
    float: left;
    width: 50px;
    height: 80px;
    margin: 0 5px 0 0;
    border-radius: 4px;
    font-size: 4rem;
    text-align: center;
    perspective: 200px
}

.flipdown .rotor:last-child {
    margin-right: 0
}

.flipdown .rotor-bottom,
.flipdown .rotor-top {
    overflow: hidden;
    position: absolute;
    width: 50px;
    height: 40px
}

.flipdown .rotor-leaf {
    z-index: 1;
    position: absolute;
    width: 50px;
    height: 80px;
    transform-style: preserve-3d;
    transition: transform 0s
}

.flipdown .rotor-leaf.flipped {
    transform: rotateX(-180deg);
    transition: all .5s ease-in-out
}

.flipdown .rotor-leaf-front,
.flipdown .rotor-leaf-rear {
    overflow: hidden;
    position: absolute;
    width: 50px;
    height: 40px;
    margin: 0;
    transform: rotateX(0deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

.flipdown .rotor-leaf-front {
    line-height: 80px;
    border-radius: 4px 4px 0 0
}

.flipdown .rotor-leaf-rear {
    line-height: 0px;
    border-radius: 0 0 4px 4px;
    transform: rotateX(-180deg)
}

.flipdown .rotor-top {
    line-height: 80px;
    border-radius: 4px 4px 0 0
}

.flipdown .rotor-bottom {
    bottom: 0;
    line-height: 0px;
    border-radius: 0 0 4px 4px
}

.flipdown .rotor:after {
    content: "";
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 40px;
    border-radius: 0 0 4px 4px
}

@media (max-width:550px) {
    .flipdown {
        width: 312px;
        height: 70px
    }
    .flipdown .rotor {
        font-size: 2.2rem;
        margin-right: 3px
    }
    .flipdown .rotor,
    .flipdown .rotor-bottom,
    .flipdown .rotor-leaf,
    .flipdown .rotor-leaf-front,
    .flipdown .rotor-leaf-rear,
    .flipdown .rotor-top,
    .flipdown .rotor:after {
        width: 30px
    }
    .flipdown .rotor-group {
        padding-right: 20px
    }
    .flipdown .rotor-group:last-child {
        padding-right: 0
    }
    .flipdown .rotor-group-heading:before {
        font-size: .8rem;
        height: 20px;
        line-height: 20px
    }
    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after,
    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
        left: 69px
    }
    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
        bottom: 13px;
        height: 8px;
        width: 8px
    }
    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
        bottom: 29px;
        height: 8px;
        width: 8px
    }
    .flipdown .rotor-leaf-front,
    .flipdown .rotor-top {
        line-height: 50px
    }
    .flipdown .rotor,
    .flipdown .rotor-leaf {
        height: 50px
    }
    .flipdown .rotor-bottom,
    .flipdown .rotor-leaf-front,
    .flipdown .rotor-leaf-rear,
    .flipdown .rotor-top,
    .flipdown .rotor:after {
        height: 25px
    }
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H0TbFhsqMA6aw.5a14478c.woff2) format("woff2");
    unicode-range: U+0590-05ff, U+20aa, U+25cc, U+fb1d-fb4f
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H2TbFhsqMA.c6c0d6e9.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H0TbFhsqMA6aw.5a14478c.woff2) format("woff2");
    unicode-range: U+0590-05ff, U+20aa, U+25cc, U+fb1d-fb4f
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H2TbFhsqMA.c6c0d6e9.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H0TbFhsqMA6aw.5a14478c.woff2) format("woff2");
    unicode-range: U+0590-05ff, U+20aa, U+25cc, U+fb1d-fb4f
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H2TbFhsqMA.c6c0d6e9.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H0TbFhsqMA6aw.5a14478c.woff2) format("woff2");
    unicode-range: U+0590-05ff, U+20aa, U+25cc, U+fb1d-fb4f
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H2TbFhsqMA.c6c0d6e9.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H0TbFhsqMA6aw.5a14478c.woff2) format("woff2");
    unicode-range: U+0590-05ff, U+20aa, U+25cc, U+fb1d-fb4f
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H2TbFhsqMA.c6c0d6e9.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H0TbFhsqMA6aw.5a14478c.woff2) format("woff2");
    unicode-range: U+0590-05ff, U+20aa, U+25cc, U+fb1d-fb4f
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H2TbFhsqMA.c6c0d6e9.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H0TbFhsqMA6aw.5a14478c.woff2) format("woff2");
    unicode-range: U+0590-05ff, U+20aa, U+25cc, U+fb1d-fb4f
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H2TbFhsqMA.c6c0d6e9.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H0TbFhsqMA6aw.5a14478c.woff2) format("woff2");
    unicode-range: U+0590-05ff, U+20aa, U+25cc, U+fb1d-fb4f
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H2TbFhsqMA.c6c0d6e9.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H0TbFhsqMA6aw.5a14478c.woff2) format("woff2");
    unicode-range: U+0590-05ff, U+20aa, U+25cc, U+fb1d-fb4f
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/_next/static/media/NGS6v5_NC0k9P9H2TbFhsqMA.c6c0d6e9.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: Manrope;
    src: url(/_next/static/media/Manrope-Bold.13e0014e.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Manrope;
    src: url(/_next/static/media/Manrope-ExtraBold.b3116da2.ttf) format("truetype");
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: Manrope;
    src: url(/_next/static/media/Manrope-ExtraLight.fedf2590.ttf) format("truetype");
    font-weight: 200;
    font-style: normal
}

@font-face {
    font-family: Manrope;
    src: url(/_next/static/media/Manrope-Light.c7470619.ttf) format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: Manrope;
    src: url(/_next/static/media/Manrope-Medium.21bd6fd9.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Manrope;
    src: url(/_next/static/media/Manrope-Regular.bd4fdd36.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Manrope;
    src: url(/_next/static/media/Manrope-SemiBold.a1b1fe16.ttf) format("truetype");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-Variable.d9396795.woff2) format("woff2"), url(/_next/static/media/Satoshi-Variable.5fada1b1.woff) format("woff"), url(/_next/static/media/Satoshi-Variable.867bce6e.ttf) format("truetype");
    font-weight: 300 900;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-VariableItalic.7c85d340.woff2) format("woff2"), url(/_next/static/media/Satoshi-VariableItalic.08edfc72.woff) format("woff"), url(/_next/static/media/Satoshi-VariableItalic.675122d2.ttf) format("truetype");
    font-weight: 300 900;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-Light.d3f699ab.woff2) format("woff2"), url(/_next/static/media/Satoshi-Light.ce217c5d.woff) format("woff"), url(/_next/static/media/Satoshi-Light.121b151d.ttf) format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-LightItalic.0d87c97a.woff2) format("woff2"), url(/_next/static/media/Satoshi-LightItalic.51efbee6.woff) format("woff"), url(/_next/static/media/Satoshi-LightItalic.58b0e971.ttf) format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-Regular.b1dca2a5.woff2) format("woff2"), url(/_next/static/media/Satoshi-Regular.bb2accee.woff) format("woff"), url(/_next/static/media/Satoshi-Regular.a12eb4fb.ttf) format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-Italic.3eb4bb53.woff2) format("woff2"), url(/_next/static/media/Satoshi-Italic.43440d31.woff) format("woff"), url(/_next/static/media/Satoshi-Italic.84cd9c1d.ttf) format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-Medium.22539d17.woff2) format("woff2"), url(/_next/static/media/Satoshi-Medium.f3941e68.woff) format("woff"), url(/_next/static/media/Satoshi-Medium.8217b72e.ttf) format("truetype");
    font-weight: 500;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-MediumItalic.17afee50.woff2) format("woff2"), url(/_next/static/media/Satoshi-MediumItalic.5450477c.woff) format("woff"), url(/_next/static/media/Satoshi-MediumItalic.14c46485.ttf) format("truetype");
    font-weight: 500;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-Bold.12084922.woff2) format("woff2"), url(/_next/static/media/Satoshi-Bold.b28a04c4.woff) format("woff"), url(/_next/static/media/Satoshi-Bold.c60efc8f.ttf) format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-BoldItalic.e51fcc53.woff2) format("woff2"), url(/_next/static/media/Satoshi-BoldItalic.b59cf06f.woff) format("woff"), url(/_next/static/media/Satoshi-BoldItalic.c1d97e57.ttf) format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: italic
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-Black.c6d20a6b.woff2) format("woff2"), url(/_next/static/media/Satoshi-Black.28873509.woff) format("woff"), url(/_next/static/media/Satoshi-Black.12d5a2e3.ttf) format("truetype");
    font-weight: 900;
    font-display: swap;
    font-style: normal
}

@font-face {
    font-family: Satoshi;
    src: url(/_next/static/media/Satoshi-BlackItalic.5400951d.woff2) format("woff2"), url(/_next/static/media/Satoshi-BlackItalic.22c3e8d9.woff) format("woff"), url(/_next/static/media/Satoshi-BlackItalic.33bc16b8.ttf) format("truetype");
    font-weight: 900;
    font-display: swap;
    font-style: italic
}

@media screen and (max-width:768px) {
    .header {
        position: fixed;
        top: 0;
        left: 0;
        padding: 28px 20px;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 999;
        transition: all .3s
    }
    .header .social-media {
        display: none
    }
    .header .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 80px 20px 20px;
        background: #1a1a1a;
        color: #fff;
        display: block;
        z-index: -1
    }
    .header .nav.mobile-hide {
        display: none !important
    }
    .header .nav.mobile-show {
        display: block !important
    }
    .header .nav .nav-item {
        padding: 14px 20px;
        font-size: 16px;
        color: #fff
    }
    .header .nav .nav-dropdown {
        position: relative;
        transition: all .5s
    }
    .header .nav .nav-dropdown .nav-item {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .header .nav .nav-dropdown.active .nav-item {
        color: #fff;
        background-color: #03d498;
        border-radius: 6px
    }
    .header .nav .nav-dropdown.active .dropdown {
        display: block
    }
    .header .nav .nav-dropdown.active .arrow {
        fill: transparent;
        stroke: #fff;
        transform: rotate(180deg)
    }
    .header .nav .nav-dropdown .dropdown {
        display: none
    }
    .header .nav .nav-dropdown .dropdown .dropdown-item {
        padding: 8px 16px
    }
    .header .nav .nav-dropdown .dropdown .dropdown-item a {
        padding: 8px 16px;
        display: block;
        color: #a9a9a9
    }
    .header .logo {
        width: 124px;
        height: 24px;
        display: block
    }
    .header .toggle-icon {
        width: 24px;
        height: 24px
    }
    .header-bg {
        background: hsla(0, 0%, 9%, .88)
    }
}

@media screen and (min-width:769px) {
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 37px 142px;
        min-width: 1440px;
        height: 128px;
        border-radius: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        z-index: 999
    }
    .header .logo {
        width: 221px;
        height: 43px;
        display: block
    }
    .header .toggle {
        display: none
    }
    .header .nav {
        height: 54px;
        border-radius: 999px;
        border: 1px solid hsla(0, 0%, 100%, .1);
        background: radial-gradient(107.5% 107.5% at 50% 50%, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0) 100%);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        display: flex;
        align-items: center
    }
    .header .nav .nav-item {
        position: relative;
        padding: 0 20px;
        height: 22px;
        line-height: 22px;
        color: #fff;
        text-align: center;
        font-family: Satoshi;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap
    }
    .header .nav .nav-dropdown {
        position: relative;
        transition: all .5s
    }
    .header .nav .nav-dropdown .nav-item {
        display: flex;
        align-items: center;
        gap: 8px
    }
    .header .nav .nav-dropdown:hover .dropdown {
        display: block
    }
    .header .nav .nav-dropdown:hover .arrow {
        stroke: #08c08b;
        transform: translateY(2px)
    }
    .header .nav .nav-dropdown .arrow {
        transition: transform .3s ease-in-out 0s;
        transform: translateY(0)
    }
    .header .nav .nav-dropdown .dropdown {
        display: none;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
        padding-top: 30px;
        max-height: 0
    }
    .header .nav .nav-dropdown .dropdown ul {
        background-color: #1a1a1a;
        box-shadow: 0 2px 8px 0 rgba(1, 1, 7, .23);
        margin: 0;
        padding: 12px 24px;
        border-radius: 8px
    }
    .header .nav .nav-dropdown .dropdown .dropdown-item a {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        color: #a9a9a9;
        border-radius: 6px
    }
    .header .nav .nav-dropdown .dropdown .dropdown-item a:hover {
        color: #08c08b;
        background-color: #131313
    }
    .header .nav .nav-line {
        width: 1px;
        height: 22px;
        background: hsla(0, 0%, 100%, .1)
    }
    .header .social-media {
        display: flex;
        align-items: center;
        gap: 12px
    }
    .header .social-media .social-media-link {
        width: 32px;
        height: 32px
    }
    .header .social-media .social-media-link img {
        width: 100%;
        height: 100%;
        display: block
    }
    .header-bg {
        background: hsla(0, 0%, 9%, .88);
        padding: 12px 142px;
        height: auto
    }
}

@media screen and (max-width:768px) {
    .footer {
        background-color: #000;
        position: relative
    }
    .footer .footer-content {
        position: relative;
        margin: 0 auto;
        padding: 24px 0;
        max-width: 315px;
        overflow: hidden;
        z-index: 1
    }
    .footer .logo img {
        margin: 0 auto;
        display: block;
        width: 160px
    }
    .footer .social-media {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        margin-top: 14px
    }
    .footer .line {
        display: none
    }
    .footer .line-mobile {
        margin: 16px auto;
        display: block;
        max-width: 315px
    }
    .nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px
    }
    .nav .nav-title {
        margin-bottom: 16px;
        color: #fff;
        font-family: Chakra Petch;
        font-size: 14px;
        font-weight: 700;
        line-height: normal
    }
    .nav .nav-item,
    .nav .nav-title {
        display: block;
        font-style: normal
    }
    .nav .nav-item {
        color: hsla(0, 0%, 100%, .8);
        font-family: Open Sans;
        font-size: 12px;
        font-weight: 600;
        line-height: 219.4%
    }
    .copyright {
        margin: 0 auto;
        text-align: center;
        color: #fff;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }
    .bg-img {
        display: none
    }
    .footer-bg-mobile,
    .footer-shadow-mobile {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 0
    }
}

@media screen and (min-width:769px) {
    .footer {
        position: relative;
        padding-top: 67px;
        background-color: #000
    }
    .footer .footer-content {
        position: relative;
        margin: 0 auto;
        width: 1137px;
        z-index: 1
    }
    .footer .logo,
    .footer .social-media {
        display: flex;
        justify-content: center
    }
    .footer .social-media {
        margin-top: 26px;
        align-items: center;
        gap: 12px
    }
    .footer .social-media .social-media-link {
        width: 32px;
        height: 32px
    }
    .footer .social-media .social-media-link img {
        width: 100%;
        height: 100%;
        display: block
    }
    .footer .line img {
        display: block;
        margin: 26px auto;
        width: 1114px;
        height: 21px
    }
    .footer .line-mobile {
        display: none
    }
    .footer .nav {
        width: 1137px;
        display: flex;
        justify-content: space-around
    }
    .footer .nav .nav-title {
        color: #fff;
        font-family: Chakra Petch;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .footer .nav .nav-list {
        margin-top: 24px
    }
    .footer .nav .nav-list .nav-item {
        display: block;
        color: hsla(0, 0%, 100%, .8);
        font-family: Open Sans;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 184.4%
    }
    .footer .copyright {
        margin: 0 auto;
        padding: 67px 0;
        text-align: center;
        color: #fff;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        z-index: 9
    }
    .footer .footer-bg,
    .footer .footer-shadow {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 0
    }
    .bg-img-mobile {
        display: none
    }
}

@media screen and (max-width:768px) {
    .main {
        position: relative;
        overflow-x: hidden
    }
    .main .part-title {
        color: #fff;
        text-align: center;
        font-family: Chakra Petch;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-1 {
        position: relative;
        height: 933px;
        background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(/images/bg-1.gif) 50%/cover no-repeat;
        overflow: hidden
    }
    .main .part-1:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 820px;
        background: radial-gradient(56.03% 56.03% at 50% 0, rgba(3, 212, 152, .3) 0, rgba(3, 212, 152, 0) 100%);
        z-index: 0
    }
    .main .part-1 .part-1-content {
        position: relative;
        padding-top: 80px;
        z-index: 1
    }
    .main .part-1 .banner {
        position: relative;
        margin: 30px auto 0;
        width: 350px
    }
    .main .part-1 .banner .banner-pc {
        display: none !important
    }
    .main .part-1 .banner .banner-item {
        width: 350px;
        height: 71px;
        border-radius: 36px;
        border: .343px solid hsla(0, 0%, 100%, .1);
        background: radial-gradient(107.5% 107.5% at 50% 50%, rgba(3, 212, 152, .12) 0, rgba(3, 212, 152, 0) 100%);
        -webkit-backdrop-filter: blur(17.1676368713px);
        backdrop-filter: blur(17.1676368713px);
        text-align: center;
        color: #fff;
        font-family: Chakra Petch;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        display: block
    }
    .main .part-1 .banner .banner-item.banner-item-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 4px
    }
    .main .part-1 .banner .banner-img {
        width: 100%;
        display: block
    }
    .main .part-1 .banner .swiper-button-next,
    .main .part-1 .banner .swiper-button-prev {
        color: #fff
    }
    .main .part-1 .banner .swiper-button-next:after,
    .main .part-1 .banner .swiper-button-prev:after {
        font-size: 16px;
        font-weight: 700
    }
    .main .part-1 .banner .swiper-button-prev {
        left: 0
    }
    .main .part-1 .banner .swiper-button-next {
        right: 0
    }
    .main .part-1 .title {
        margin-top: 28px;
        text-align: center
    }
    .main .part-1 .title .title-sub {
        color: #fff;
        font-size: 20px
    }
    .main .part-1 .title .title-main,
    .main .part-1 .title .title-sub {
        text-align: center;
        font-family: Chakra Petch;
        font-style: normal;
        font-weight: 700;
        line-height: 118.9%
    }
    .main .part-1 .title .title-main {
        margin: 0 auto;
        width: 320px;
        color: #03d498;
        font-size: 31px
    }
    .main .part-1 .title .line-1 {
        margin: 14px auto 12px;
        width: 324px;
        display: block
    }
    .main .part-1 .title .title-desc {
        margin: 0 auto;
        width: 328px;
        height: 66px;
        color: rgba(231, 224, 236, .8);
        text-align: center;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 22px
    }
    .main .part-1 .vertical-swiper {
        height: 66px
    }
    .main .part-1 .link-btns {
        margin-top: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px
    }
    .main .part-1 .link-btns .btn {
        padding: 11px 26px;
        gap: 2px;
        font-size: 12px
    }
    .main .part-1 .link-btns .btn .icon-right {
        width: 10px
    }
    .main .part-1 .summary {
        margin-top: 24px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 14px
    }
    .main .part-1 .summary .summary-label {
        font-size: 12px
    }
    .main .part-1 .summary .summary-label,
    .main .part-1 .summary .summary-value {
        color: #fff;
        font-family: Chakra Petch;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-1 .summary .summary-value {
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px
    }
    .main .part-1 .powered-by {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px
    }
    .main .part-1 .powered-by .powered-label {
        text-align: center;
        color: #fff;
        font-family: Chakra Petch;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-1 .powered-by .powered-list {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px
    }
    .main .part-2 {
        position: relative;
        height: 1014px;
        padding: 24px 0;
        overflow: hidden
    }
    .main .part-2 .part-title {
        margin: 0 auto 36px;
        width: 220px
    }
    .main .part-2 .text {
        margin-top: 16px;
        color: #fff;
        text-align: center;
        font-family: Chakra Petch;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 160%
    }
    .main .part-2 .btn-green {
        display: flex;
        width: 210px;
        height: 48px;
        padding: 11px 79px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 65px;
        background: linear-gradient(90deg, #03d498, #007452);
        box-shadow: inset 17px 14px 30px 0 hsla(0, 0%, 100%, .4), 0 100px 80px 0 rgba(41, 72, 152, .05), 0 64.81px 46.85px 0 rgba(41, 72, 152, .04), 0 38.52px 25.48px 0 rgba(41, 72, 152, .03), 0 20px 13px 0 rgba(41, 72, 152, .03), 0 8.15px 6.52px 0 rgba(41, 72, 152, .02), 0 4px 3.15px 0 rgba(41, 72, 152, .01)
    }
    .main .part-2 .btn-green .btn-text {
        color: #fff;
        text-align: center;
        font-family: Chakra Petch;
        font-size: 13.288px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-2 .btn-green .icon-ethereum {
        width: 12px
    }
    .main .part-2 .btn-green.rollup-zklink-nova {
        margin-top: 16px
    }
    .main .part-2 .btn-green.rollup-zklink-nova img {
        width: 110px
    }
    .main .part-2 .rollup-flow {
        position: relative
    }
    .main .part-2 .rollup-flow .rollup-line {
        margin: 0 auto;
        width: 184px;
        display: block
    }
    .main .part-2 .rollup-flow .rollup-line.pc {
        display: none
    }
    .main .part-2 .rollup-flow .btn-2 {
        margin-bottom: 14px;
        border: none;
        width: 226px;
        height: 34px;
        padding: 6px 18px;
        gap: 4px;
        color: #fff;
        text-align: center;
        font-family: Chakra Petch;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        line-height: 160%
    }
    .main .part-2 .rollup-flow .btn-2,
    .main .part-2 .rollup-flow .rollup-box {
        border-radius: 38px;
        background: rgba(230, 224, 233, .1);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        display: flex;
        justify-content: center;
        align-items: center
    }
    .main .part-2 .rollup-flow .rollup-box {
        width: 196px;
        padding: 12px 42px;
        flex-direction: column;
        gap: 18px
    }
    .main .part-2 .rollup-flow .rollup-box .rollup-card {
        padding: 6px 16px;
        border-radius: 8px;
        border: 1px solid hsla(0, 0%, 100%, .1);
        background: linear-gradient(180deg, rgba(39, 39, 39, .4), rgba(26, 26, 26, .4));
        box-shadow: inset 2px 2px 30px 0 hsla(0, 0%, 100%, .14), 0 100px 80px 0 rgba(41, 72, 152, .05), 0 64.81px 46.85px 0 rgba(41, 72, 152, .04), 0 38.52px 25.48px 0 rgba(41, 72, 152, .03), 0 20px 13px 0 rgba(41, 72, 152, .03), 0 8.15px 6.52px 0 rgba(41, 72, 152, .02), 0 4px 3.15px 0 rgba(41, 72, 152, .01);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px)
    }
    .main .part-2 .rollup-flow .learn-more {
        margin-top: 36px;
        padding: 15px 18px
    }
    .main .part-2 .rollup-flow .liquidity-box .liquidity-1 {
        position: absolute;
        top: 50px;
        left: 12px;
        font-size: 12px;
        max-width: 80px
    }
    .main .part-2 .rollup-flow .liquidity-box .liquidity-2 {
        position: absolute;
        top: 288px;
        max-width: 50px;
        right: 20px;
        font-size: 12px
    }
    .main .part-2 .rollup-flow .liquidity-box .liquidity-3 {
        position: absolute;
        top: 530px;
        left: 12px;
        max-width: 60px;
        font-size: 12px
    }
    .main .part-2 .btn {
        margin-top: 36px
    }
    .main .part-3 {
        padding: 24px 0;
        overflow: hidden
    }
    .main .part-3 .title {
        margin: 0 auto;
        max-width: 360px
    }
    .main .part-3 .sub-title {
        margin-top: 10px;
        text-align: center;
        font-family: Chakra Petch;
        font-style: normal;
        font-weight: 700;
        line-height: 118.9%;
        color: #03d498;
        font-size: 20px
    }
    .main .part-3 .cards {
        margin-top: 24px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }
    .main .part-3 .cards .card-item {
        position: relative;
        padding: 14px;
        width: 167px;
        height: 196px
    }
    .main .part-3 .cards .card-item .icon {
        width: 32px;
        height: 32px;
        display: block
    }
    .main .part-3 .cards .card-item .card-title {
        margin-top: 20px;
        color: #f4f0ff;
        font-family: Chakra Petch;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-3 .cards .card-item .card-desc {
        margin-top: 10px;
        width: 129px;
        color: rgba(239, 237, 253, .6);
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }
    .main .part-4 {
        position: relative;
        padding: 24px 20px;
        overflow: hidden
    }
    .main .part-4 .animation-img,
    .main .part-4 .card-4-ellipse {
        display: none
    }
    .main .part-4 .card {
        margin: 20px auto 0;
        padding: 32px 28px;
        min-height: 160px;
        border-radius: 5.24px;
        border: .524px solid rgba(3, 212, 152, .2);
        background: rgba(24, 24, 27, .4);
        -webkit-backdrop-filter: blur(5.2395205498px);
        backdrop-filter: blur(5.2395205498px);
        overflow: hidden
    }
    .main .part-4 .card .card-title {
        color: #f4f0ff;
        font-family: Chakra Petch;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-4 .card .card-desc {
        margin-top: 10px;
        color: rgba(239, 237, 253, .6);
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 134.4%
    }
    .main .part-4 .card.card-1 .card-desc,
    .main .part-4 .card.card-1 .card-title {
        width: 172px
    }
    .main .part-4 .card.card-1 .right-bg {
        display: block;
        position: absolute;
        top: -120px;
        right: -90px;
        width: 300px
    }
    .main .part-4 .card.card-1 .right-shadow {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 240px
    }
    .main .part-4 .card.card-2 .card-title {
        width: 195px
    }
    .main .part-4 .card.card-2 .card-desc {
        width: 172px
    }
    .main .part-4 .card.card-2 .right-bg {
        display: block;
        position: absolute;
        right: -36px;
        bottom: -24px;
        width: 162px
    }
    .main .part-4 .card.card-2 .right-shadow {
        display: block;
        width: 200px;
        position: absolute;
        right: 0;
        bottom: 0
    }
    .main .part-4 .card.card-3 .card-title {
        width: 244px
    }
    .main .part-4 .card.card-3 .card-desc {
        width: 217px
    }
    .main .part-4 .card.card-3 .right-bg {
        display: block;
        position: absolute;
        bottom: -50px;
        right: -10px;
        width: 120px
    }
    .main .part-4 .card.card-3 .right-shadow {
        color: transparent;
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 160px
    }
    .main .part-4 .card.card-4 .card-title {
        width: 172px
    }
    .main .part-4 .card.card-4 .card-desc {
        width: 182px
    }
    .main .part-4 .card.card-4 .right-bg-mobile {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 125px;
        display: block
    }
    .main .part-4 .card.card-4 .right-shadow-mobile {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 227px;
        display: block
    }
    .main .part-4 .card .right-bg,
    .main .part-4 .card .right-shadow {
        display: none
    }
    .main .part-5 {
        position: relative;
        margin-top: 30px;
        overflow: hidden
    }
    .main .part-5 .title {
        margin: 0 auto;
        text-align: center;
        max-width: 320px
    }
    .main .part-5 .title .part-title-desc {
        margin-top: 10px
    }
    .main .part-5 .title .btn {
        margin-top: 20px
    }
    .main .part-5 .card-box {
        display: none
    }
    .main .part-5 .eco-swiper {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px
    }
    .main .part-5 .eco-swiper .swiper-slide {
        background-position: 50%;
        background-size: cover;
        width: 200px;
        height: 275px;
        border-radius: 4.395px;
        background: hsla(0, 0%, 100%, .04);
        -webkit-backdrop-filter: blur(21.9736843109px);
        backdrop-filter: blur(21.9736843109px);
        overflow: hidden
    }
    .main .part-5 .eco-swiper .card-item {
        position: relative;
        padding: 18px;
        height: 100%;
        overflow: hidden
    }
    .main .part-5 .eco-swiper .card-item .bg-shadow {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0
    }
    .main .part-5 .eco-swiper .card-item .logo {
        display: block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: .439px solid hsla(0, 0%, 100%, .1);
        box-shadow: inset .879px .879px 13.184px 0 hsla(0, 0%, 100%, .14), 0 16.929px 11.198px 0 rgba(41, 72, 152, .03)
    }
    .main .part-5 .eco-swiper .card-item .card-title {
        margin-top: 8px;
        color: #f4f0ff;
        font-family: Chakra Petch;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-5 .eco-swiper .card-item .card-links {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: .439px solid hsla(0, 0%, 100%, .08)
    }
    .main .part-5 .eco-swiper .card-item .card-links .link-icon {
        display: block;
        width: 28px;
        height: 28px
    }
    .main .part-5 .eco-swiper .card-item .card-desc {
        margin-top: 8px;
        max-width: 162px;
        color: rgba(239, 237, 253, .6);
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 137.1%
    }
    .main .part-5 .eco-swiper .card-item .card-btns {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        margin-top: 14px;
        padding: 0 18px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between
    }
    .main .part-5 .eco-swiper .card-item .card-btns button {
        width: 80px;
        height: 32px;
        border-radius: 26.368px;
        border: .439px solid hsla(0, 0%, 100%, .2);
        background: linear-gradient(90deg, rgba(3, 212, 152, .06), rgba(0, 116, 82, .06));
        box-shadow: inset 3.516px 3.516px 8.789px 0 hsla(0, 0%, 100%, .2), 0 43.947px 35.158px 0 rgba(41, 72, 152, .05), 0 28.482px 20.589px 0 rgba(41, 72, 152, .04), 0 16.929px 11.198px 0 rgba(41, 72, 152, .03), 0 8.789px 5.713px 0 rgba(41, 72, 152, .03), 0 3.582px 2.865px 0 rgba(41, 72, 152, .02), 0 1.758px 1.384px 0 rgba(41, 72, 152, .01);
        color: #fff;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-6 {
        position: relative
    }
    .main .part-6 .cards {
        display: none
    }
    .main .part-6 .latest-swiper {
        position: relative;
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px
    }
    .main .part-6 .latest-swiper .swiper-slide {
        background-position: 50%;
        background-size: cover;
        width: 194px;
        height: 200px;
        border-radius: 6.663px;
        border: .666px solid rgba(3, 212, 152, .2);
        background: rgba(24, 24, 27, .2);
        -webkit-backdrop-filter: blur(6.6629590988px);
        backdrop-filter: blur(6.6629590988px);
        overflow: hidden
    }
    .main .part-6 .latest-swiper .card-item {
        position: relative;
        height: 100%
    }
    .main .part-6 .latest-swiper .card-item .card-banner {
        width: 100%;
        display: block
    }
    .main .part-6 .latest-swiper .card-item .card-content {
        padding: 12px 16px
    }
    .main .part-6 .latest-swiper .card-item .card-content .title {
        color: #fff;
        font-family: Chakra Petch;
        font-size: 14px;
        font-weight: 700;
        line-height: normal
    }
    .main .part-6 .latest-swiper .card-item .card-content .desc,
    .main .part-6 .latest-swiper .card-item .card-content .title {
        font-style: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .main .part-6 .latest-swiper .card-item .card-content .desc {
        margin-top: 8px;
        color: rgba(239, 237, 253, .6);
        font-family: Inter;
        font-size: 12px;
        font-weight: 400;
        line-height: 15.991px
    }
    .main .part-6 .latest-swiper .card-item .card-content .card-btn {
        position: absolute;
        left: 16px;
        bottom: 16px
    }
    .main .part-6 .latest-swiper .card-item .card-content .card-btn button {
        width: 106px;
        height: 35px;
        border-radius: 665.63px;
        border: .666px solid hsla(0, 0%, 100%, .1);
        background: radial-gradient(107.5% 107.5% at 50% 50%, rgba(3, 212, 152, .02) 0, rgba(3, 212, 152, 0) 100%);
        -webkit-backdrop-filter: blur(33.3147926331px);
        backdrop-filter: blur(33.3147926331px);
        text-align: center;
        font-family: Satoshi;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 15.991px;
        color: #fff
    }
    .main .part-6 .latest-swiper .card-item .bg-shadow {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0
    }
}

@media screen and (min-width:769px) {
    .main .part-title {
        color: #fff;
        font-family: Chakra Petch;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 106.9%;
        text-align: center
    }
    .main .part-title-desc {
        color: rgba(231, 224, 236, .8);
        text-align: center;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 160.3%
    }
    .main .part-1 {
        position: relative;
        padding-top: 128px;
        height: 896px;
        background-color: #000
    }
    .main .part-1:after {
        background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(/images/bg-1.gif) #000 50%/cover no-repeat
    }
    .main .part-1:after,
    .main .part-1:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 896px;
        z-index: 0
    }
    .main .part-1:before {
        background: radial-gradient(56.03% 56.03% at 50% 0, rgba(3, 212, 152, .3) 0, rgba(3, 212, 152, .1) 100%)
    }
    .main .part-1 .part-1-content {
        position: relative;
        margin: 0 auto;
        width: 1019.36px;
        z-index: 1
    }
    .main .part-1 .banner {
        position: relative;
        margin: 32px auto 70px;
        height: 74px
    }
    .main .part-1 .banner .banner-mobile {
        display: none !important
    }
    .main .part-1 .banner .banner-item {
        height: 74px;
        color: #fff;
        border-radius: 42px;
        border: 1px solid hsla(0, 0%, 100%, .1);
        background: radial-gradient(107.5% 107.5% at 50% 50%, rgba(3, 212, 152, .05) 0, rgba(3, 212, 152, .1) 100%);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        display: block
    }
    .main .part-1 .banner .banner-item.banner-item-2 {
        padding: 0 32px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .main .part-1 .banner .banner-item .banner-text {
        color: #fff;
        font-family: Chakra Petch;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-1 .banner .banner-item .banner-text.banner-sub-text {
        font-size: 14px
    }
    .main .part-1 .banner .banner-item .banner-1-left {
        display: flex;
        align-items: center;
        gap: 8px
    }
    .main .part-1 .banner .banner-item .banner-1-right {
        display: flex;
        align-items: center;
        gap: 11px
    }
    .main .part-1 .banner .banner-item .banner-1-item {
        color: #f4f0ff;
        font-family: Chakra Petch;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        display: flex;
        align-items: center;
        gap: 8px
    }
    .main .part-1 .banner .banner-img {
        width: 100%;
        display: block
    }
    .main .part-1 .banner .swiper-button-next,
    .main .part-1 .banner .swiper-button-prev {
        color: #fff
    }
    .main .part-1 .banner .swiper-button-next:after,
    .main .part-1 .banner .swiper-button-prev:after {
        font-size: 24px
    }
    .main .part-1 .banner .swiper-button-prev {
        left: -36px
    }
    .main .part-1 .banner .swiper-button-next {
        right: -36px
    }
    .main .part-1 .title {
        margin: 70px auto 0;
        width: 845px;
        text-align: center
    }
    .main .part-1 .title .title-sub {
        color: #fff;
        font-size: 32px
    }
    .main .part-1 .title .title-main,
    .main .part-1 .title .title-sub {
        text-align: center;
        font-family: Chakra Petch;
        font-style: normal;
        font-weight: 700;
        line-height: 118.9%
    }
    .main .part-1 .title .title-main {
        color: var(--01, #03d498);
        font-size: 62px
    }
    .main .part-1 .title .line-1 {
        margin: 5px auto;
        width: 100%;
        display: block
    }
    .main .part-1 .title .vertical-swiper {
        height: 22px
    }
    .main .part-1 .title .title-desc {
        margin: 0 auto;
        color: rgba(231, 224, 236, .8);
        text-align: center;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 160.3%
    }
    .main .part-1 .link-btns {
        padding: 40px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px
    }
    .main .part-1 .summary {
        display: flex;
        justify-content: center;
        gap: 16px
    }
    .main .part-1 .summary .summary-label {
        font-size: 18px
    }
    .main .part-1 .summary .summary-label,
    .main .part-1 .summary .summary-value {
        color: #fff;
        font-family: Chakra Petch;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-align: center
    }
    .main .part-1 .summary .summary-value {
        margin-top: 10px;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center
    }
    .main .part-1 .summary .summary-value>img {
        width: 30px;
        height: 30px;
        display: block
    }
    .main .part-1 .powered-by {
        margin-top: 67px;
        display: flex;
        justify-content: center;
        gap: 24px
    }
    .main .part-1 .powered-by .powered-label {
        color: #fff;
        font-family: Satoshi;
        font-size: 16px;
        font-style: normal;
        font-weight: 900;
        line-height: normal
    }
    .main .part-1 .powered-by .powered-list {
        display: flex;
        align-items: center;
        gap: 8px
    }
    .main .part-2 {
        position: relative;
        height: 930px;
        background: url(/images/bg-2.gif) 50%/cover no-repeat
    }
    .main .part-2:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 930px;
        background: url(/images/bg-2.svg) 50%/cover no-repeat;
        z-index: 0
    }
    .main .part-2 .part-2-content {
        position: relative;
        margin: 0 auto;
        z-index: 1
    }
    .main .part-2 .part-2-content .title {
        margin: 70px 0 36px;
        height: 55px
    }
    .main .part-2 .part-2-content .btn-green {
        margin: 0 auto;
        display: flex;
        width: 280px;
        height: 64px;
        padding: 11px 79px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: none;
        border-radius: 65px;
        background: linear-gradient(90deg, #03d498, #007452);
        box-shadow: inset 17px 14px 30px 0 hsla(0, 0%, 100%, .4), 0 100px 80px 0 rgba(41, 72, 152, .05), 0 64.81px 46.85px 0 rgba(41, 72, 152, .04), 0 38.52px 25.48px 0 rgba(41, 72, 152, .03), 0 20px 13px 0 rgba(41, 72, 152, .03), 0 8.15px 6.52px 0 rgba(41, 72, 152, .02), 0 4px 3.15px 0 rgba(41, 72, 152, .01)
    }
    .main .part-2 .part-2-content .btn-green .btn-text {
        color: #fff;
        text-align: center;
        font-family: Chakra Petch;
        font-size: 23.586px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-2 .part-2-content .part-2-box {
        position: relative;
        padding-top: 100px
    }
    .main .part-2 .part-2-content .part-2-box .rollup-box {
        position: relative;
        margin: 14px auto 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px;
        gap: 15px;
        border-radius: 10px;
        border: 1px solid hsla(0, 0%, 100%, .1);
        background: hsla(0, 0%, 100%, .02)
    }
    .main .part-2 .part-2-content .part-2-box .rollup-flow {
        position: relative;
        margin: 0 auto;
        width: 885px
    }
    .main .part-2 .part-2-content .part-2-box .rollup-flow .liquidity-box .liquidity-1 {
        position: absolute;
        top: 50px;
        left: -50px
    }
    .main .part-2 .part-2-content .part-2-box .rollup-flow .liquidity-box .liquidity-2 {
        position: absolute;
        top: 170px;
        right: -180px
    }
    .main .part-2 .part-2-content .part-2-box .rollup-flow .liquidity-box .liquidity-3 {
        position: absolute;
        top: 290px;
        left: -50px
    }
    .main .part-2 .part-2-content .part-2-box .rollup-card {
        display: flex;
        height: 46px;
        padding: 24px 36px;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        border: 1px solid hsla(0, 0%, 100%, .1);
        background: linear-gradient(180deg, rgba(39, 39, 39, .4), rgba(26, 26, 26, .4));
        box-shadow: inset 2px 2px 30px 0 hsla(0, 0%, 100%, .14), 0 100px 80px 0 rgba(41, 72, 152, .05), 0 64.81px 46.85px 0 rgba(41, 72, 152, .04), 0 38.52px 25.48px 0 rgba(41, 72, 152, .03), 0 20px 13px 0 rgba(41, 72, 152, .03), 0 8.15px 6.52px 0 rgba(41, 72, 152, .02), 0 4px 3.15px 0 rgba(41, 72, 152, .01);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px)
    }
    .main .part-2 .part-2-content .part-2-box .part-2-img {
        position: relative;
        margin: 0 auto;
        width: 1156px;
        height: 845px;
        display: block
    }
    .main .part-2 .part-2-content .part-2-box .rollup-zklink-nova {
        margin-top: 16px;
        margin-bottom: 6px
    }
    .main .part-2 .part-2-content .part-2-box .rollup-zklink-nova img {
        width: 150px;
        display: block
    }
    .main .part-2 .part-2-content .part-2-box .rollup-line {
        margin: 0 auto;
        width: 561px;
        display: block
    }
    .main .part-2 .part-2-content .part-2-box .rollup-line.mobile {
        display: none
    }
    .main .part-2 .part-2-content .part-2-box .text {
        color: #fff;
        text-align: center;
        font-family: Chakra Petch;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 160%
    }
    .main .part-2 .part-2-content .part-2-box .text .text-bold {
        font-weight: 700
    }
    .main .part-2 .part-2-content .part-2-box .mt-12 {
        margin-top: 12px
    }
    .main .part-2 .part-2-content .part-2-box .mt-36 {
        margin-top: 36px
    }
    .main .part-2 .part-2-content .part-2-box .btn-2 {
        padding: 6px 18px;
        text-align: center;
        font-family: Chakra Petch;
        font-size: 12.7px;
        font-style: normal;
        font-weight: 700;
        line-height: 160%;
        text-transform: capitalize;
        border-radius: 37px;
        background: rgba(230, 224, 233, .1);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        color: #fff;
        border: none
    }
    .main .part-3 {
        padding: 50px 142px;
        height: 637px
    }
    .main .part-3 .part-3-content {
        position: relative
    }
    .main .part-3 .title {
        margin: 50px auto;
        max-width: 747px
    }
    .main .part-3 .title .sub-title {
        margin-top: 10px;
        text-align: center;
        font-family: Chakra Petch;
        font-style: normal;
        font-weight: 700;
        line-height: 118.9%;
        color: #03d498;
        font-size: 32px
    }
    .main .part-3 .cards {
        margin-top: 50px;
        padding: 20px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        gap: 15px
    }
    .main .part-3 .cards .card-item {
        position: relative;
        padding-top: 24px;
        padding-left: 24px;
        width: 273px;
        height: 322px;
        border-radius: 10px;
        background: hsla(0, 0%, 100%, .02);
        overflow: hidden;
        transition: all .3s
    }
    .main .part-3 .cards .card-item .left-line {
        content: "";
        display: block;
        position: absolute;
        top: 88px;
        left: 0;
        width: 1px;
        height: 16px;
        background: hsla(0, 0%, 100%, .24);
        z-index: 1
    }
    .main .part-3 .cards .card-item:hover {
        transform: translateY(-20px)
    }
    .main .part-3 .cards .card-item:hover:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 273px;
        height: 322px;
        border-radius: 10px;
        background: hsla(0, 0%, 100%, .04)
    }
    .main .part-3 .cards .card-item:hover:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 150px;
        width: 244px;
        height: 282px;
        border-radius: 282px;
        background: rgba(3, 212, 152, .2);
        filter: blur(50px);
        z-index: 0
    }
    .main .part-3 .cards .card-item .card-title {
        margin-top: 32px;
        color: #f4f0ff;
        font-family: Chakra Petch;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        width: 210px;
        height: 46px
    }
    .main .part-3 .cards .card-item .card-desc {
        margin-top: 32px;
        width: 210px;
        color: rgba(239, 237, 253, .6);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px
    }
    .main .part-4 {
        position: relative;
        padding: 50px 142px;
        height: 792px
    }
    .main .part-4 .animation-img {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 226px;
        display: block;
        filter: grayscale(100%);
        transform: scaleX(-1)
    }
    .main .part-4 .part-4-content {
        position: relative
    }
    .main .part-4 .title {
        margin: 0 auto;
        max-width: 885px
    }
    .main .part-4 .cards {
        position: relative;
        margin: 86px auto 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px
    }
    .main .part-4 .cards .card-4-ellipse {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
    .main .part-4 .cards .card {
        position: relative;
        padding-top: 40px;
        padding-left: 40px;
        border-radius: 10px;
        border: 1px solid rgba(3, 212, 152, .1);
        background: rgba(24, 24, 27, .4);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        overflow: hidden;
        transition: all 3s
    }
    .main .part-4 .cards .card .card-title {
        color: #f4f0ff;
        font-family: Chakra Petch;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }
    .main .part-4 .cards .card .card-desc {
        margin-top: 16px;
        color: rgba(239, 237, 253, .6);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px
    }
    .main .part-4 .cards .card:hover .desc-2 {
        display: inline
    }
    .main .part-4 .cards .desc-2 {
        display: none;
        transition: all .3s
    }
    .main .part-4 .cards .card-1 {
        width: 668px;
        height: 240px;
        transition: all .8s
    }
    .main .part-4 .cards .card-1:hover {
        border-radius: 10px;
        border: 1px solid rgba(3, 212, 152, .1);
        background: rgba(3, 212, 152, .06);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px)
    }
    .main .part-4 .cards .card-1:hover .right-bg {
        transform: rotate(45deg)
    }
    .main .part-4 .cards .card-1 .right-bg {
        position: absolute;
        bottom: -70px;
        right: -170px;
        width: 523px;
        transition: all .8s
    }
    .main .part-4 .cards .card-1 .right-shadow {
        position: absolute;
        top: 0;
        right: 0
    }
    .main .part-4 .cards .card-1 .card-desc,
    .main .part-4 .cards .card-1 .card-title {
        width: 330px
    }
    .main .part-4 .cards .card-2 {
        width: 472px;
        height: 240px;
        transition: all .8s
    }
    .main .part-4 .cards .card-2:hover {
        border-radius: 10px;
        border: 1px solid rgba(3, 212, 152, .1);
        background: rgba(3, 212, 152, .06);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px)
    }
    .main .part-4 .cards .card-2:hover .right-bg {
        transform: rotate(60deg)
    }
    .main .part-4 .cards .card-2 .right-bg {
        position: absolute;
        bottom: -80px;
        right: -40px;
        width: 219px;
        transition: all .8s
    }
    .main .part-4 .cards .card-2 .right-shadow {
        position: absolute;
        bottom: 0;
        right: 0
    }
    .main .part-4 .cards .card-2 .card-title {
        width: 330px
    }
    .main .part-4 .cards .card-2 .card-desc {
        width: 293px
    }
    .main .part-4 .cards .card-3 {
        width: 472px;
        height: 240px;
        transition: all .8s
    }
    .main .part-4 .cards .card-3:hover {
        border-radius: 10px;
        border: 1px solid rgba(3, 212, 152, .1);
        background: rgba(3, 212, 152, .06);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px)
    }
    .main .part-4 .cards .card-3:hover .right-bg {
        transform: rotate(15deg)
    }
    .main .part-4 .cards .card-3 .card-title {
        width: 330px
    }
    .main .part-4 .cards .card-3 .card-desc {
        width: 293px
    }
    .main .part-4 .cards .card-3 .right-bg {
        position: absolute;
        bottom: -140px;
        right: -40px;
        width: 222px;
        transition: all .8s
    }
    .main .part-4 .cards .card-3 .right-shadow {
        position: absolute;
        bottom: 0;
        right: 0
    }
    .main .part-4 .cards .card-4 {
        width: 668px;
        height: 240px;
        transition: all .8s
    }
    .main .part-4 .cards .card-4:hover {
        border-radius: 10px;
        border: 1px solid rgba(3, 212, 152, .1);
        background: rgba(3, 212, 152, .06);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px)
    }
    .main .part-4 .cards .card-4:hover .right-bg {
        transform: rotate(45deg)
    }
    .main .part-4 .cards .card-4 .card-title {
        width: 330px
    }
    .main .part-4 .cards .card-4 .card-desc {
        width: 349px
    }
    .main .part-4 .cards .card-4 .right-bg {
        position: absolute;
        bottom: -25px;
        right: -40px;
        width: 309px;
        transition: all .8s
    }
    .main .part-4 .cards .card-4 .right-bg-mobile,
    .main .part-4 .cards .card-4 .right-shadow-mobile {
        display: none
    }
    .main .part-4 .cards .card-5 .title {
        max-width: 774px
    }
    .main .part-4 .cards .card-5 .part-title-desc {
        margin: 22px auto
    }
    .main .part-5 {
        position: relative;
        background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(/images/bg-2.gif) 50%/cover no-repeat
    }
    .main .part-5:before {
        left: -30px;
        height: 952px;
        transform: rotate(-90deg)
    }
    .main .part-5:after,
    .main .part-5:before {
        content: "";
        display: block;
        position: absolute;
        bottom: -28px;
        width: 1016px;
        opacity: .6;
        background: radial-gradient(56.03% 56.03% at 50% 0, rgba(3, 212, 152, .3) 0, rgba(3, 212, 152, 0) 100%);
        z-index: 0
    }
    .main .part-5:after {
        right: -74px;
        height: 866px;
        transform: rotate(90deg)
    }
    .main .part-5 .bg-animation {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        display: block
    }
    .main .part-5 .part-5-content {
        position: relative;
        padding: 50px 142px;
        min-height: 1038px;
        z-index: 1
    }
    .main .part-5 .part-5-content .title {
        margin: 0 auto;
        max-width: 774px
    }
    .main .part-5 .part-5-content .part-title-desc {
        margin: 22px auto;
        max-width: 461px
    }
    .main .part-5 .part-5-content .card-list {
        margin: 22px auto;
        width: 1174px;
        height: 606px;
        display: flex;
        flex-wrap: wrap;
        gap: 16px
    }
    .main .part-5 .part-5-content .card-list .card-item {
        position: relative;
        width: 380px;
        height: 295px;
        padding: 38px 24px 38px 34px;
        gap: 10px;
        border-radius: 10px;
        background: hsla(0, 0%, 100%, .04);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        overflow: hidden
    }
    .main .part-5 .part-5-content .card-list .card-item:before {
        content: "";
        display: block;
        position: absolute;
        width: 244px;
        height: 282px;
        right: 67.5px;
        bottom: -282px;
        border-radius: 282px;
        background: rgba(3, 212, 152, .2);
        filter: blur(50px);
        transition: all .3s
    }
    .main .part-5 .part-5-content .card-list .card-item:hover:before {
        bottom: -135px
    }
    .main .part-5 .part-5-content .card-list .card-item .logo {
        width: 30px;
        height: 30px;
        border-radius: 50px;
        border: 1px solid hsla(0, 0%, 100%, .1)
    }
    .main .part-5 .part-5-content .card-list .card-item .card-title {
        margin-top: 18px;
        padding-bottom: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #f4f0ff;
        font-family: Chakra Petch;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        border-bottom: 1px solid hsla(0, 0%, 100%, .08)
    }
    .main .part-5 .part-5-content .card-list .card-item .title-links {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4px
    }
    .main .part-5 .part-5-content .card-list .card-item .title-links .link-icon {
        width: 20px;
        height: 20px
    }
    .main .part-5 .part-5-content .card-list .card-item .card-desc {
        width: 300px;
        margin-top: 16px;
        color: rgba(239, 237, 253, .6);
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px
    }
    .main .part-5 .part-5-content .card-list .card-item .card-btns {
        position: absolute;
        bottom: 40px;
        display: flex;
        align-items: center;
        gap: 6px
    }
    .main .part-5 .part-5-content .card-list .card-item .card-btns>button {
        position: relative;
        color: #fff;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        display: flex;
        width: 110px;
        height: 40px;
        padding: 12px 0;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 60px;
        border: 1px solid hsla(0, 0%, 100%, .2);
        background: linear-gradient(90deg, rgba(3, 212, 152, .06), rgba(0, 116, 82, .06));
        box-shadow: inset 8px 8px 20px 0 hsla(0, 0%, 100%, .2), 0 100px 80px 0 rgba(41, 72, 152, .05), 0 64.81px 46.85px 0 rgba(41, 72, 152, .04), 0 38.52px 25.48px 0 rgba(41, 72, 152, .03), 0 20px 13px 0 rgba(41, 72, 152, .03), 0 8.15px 6.52px 0 rgba(41, 72, 152, .02), 0 4px 3.15px 0 rgba(41, 72, 152, .01)
    }
    .main .part-5 .part-5-content .card-page .page-box {
        margin: 0 auto;
        padding: 14px 20px;
        width: 183px;
        border-radius: 999px;
        border: 1px solid hsla(0, 0%, 100%, .1);
        background: radial-gradient(107.5% 107.5% at 50% 50%, hsla(0, 0%, 100%, .05) 0, hsla(0, 0%, 100%, 0) 100%);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        display: flex;
        gap: 16px;
        justify-content: center;
        align-items: center
    }
    .main .part-5 .part-5-content .card-page .page-box .page-item {
        color: #fff;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer
    }
    .main .part-5 .part-5-content .card-page .page-box .page-item.disabled {
        opacity: .4;
        cursor: not-allowed
    }
    .main .part-5 .part-5-content .card-page .page-box .line {
        height: 22px;
        width: 1px;
        background-color: hsla(0, 0%, 100%, .1)
    }
    .main .part-5 .eco-swiper {
        display: none
    }
    .main .part-6 {
        padding: 50px 142px
    }
    .main .part-6 .latest-swiper {
        display: none
    }
    .main .part-6 .cards {
        margin: 39px auto 0;
        display: flex;
        justify-content: center;
        gap: 29px
    }
    .main .part-6 .cards .card-item {
        width: 366px;
        display: flex;
        padding: 24px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 22px;
        border-radius: 10px;
        border: 1px solid rgba(3, 212, 152, .2);
        background: rgba(24, 24, 27, .2);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        overflow: hidden
    }
    .main .part-6 .cards .card-item:before {
        content: "";
        display: block;
        position: absolute;
        right: 54px;
        bottom: -292px;
        width: 244px;
        height: 282px;
        border-radius: 282px;
        background: rgba(3, 212, 152, .2);
        filter: blur(50px);
        transition: all .3s
    }
    .main .part-6 .cards .card-item:hover:before {
        bottom: -92px
    }
    .main .part-6 .cards .card-item .card-content {
        max-width: 0 auto;
        width: 294px
    }
    .main .part-6 .cards .card-item .card-content .title {
        color: #fff;
        font-family: Chakra Petch;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: capitalize
    }
    .main .part-6 .cards .card-item .card-content .desc {
        margin-top: 12px;
        color: rgba(239, 237, 253, .6);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px
    }
    .main .part-6 .cards .card-item .card-content .card-btn button {
        position: relative;
        margin-top: 20px;
        padding: 8px 31px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: Satoshi;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        border-radius: 999px;
        border: 1px solid hsla(0, 0%, 100%, .1);
        background: radial-gradient(107.5% 107.5% at 50% 50%, rgba(3, 212, 152, .02) 0, rgba(3, 212, 152, .1) 100%);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        cursor: pointer
    }
    .main .part-6 .cards .card-item .card-content .card-btn button .text {
        background: linear-gradient(180deg, hsla(0, 0%, 100%, .5), #fff);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
}

body {
    background-color: #000;
    overflow: auto;
    color: #fff;
    font-family: Satoshi
}

a {
    text-decoration: none
}

.text-green {
    color: #03d498 !important
}

.text-white {
    color: #fff !important
}

.text-gray {
    color: #e7e0ec !important
}

.home-container {
    position: relative;
    min-width: 1440px;
    color: #fff;
    background-color: #000
}

@media(max-width:768px) {
    .home-container {
        min-width: 375px;
        max-width: 768px
    }
}

.home-container .btn {
    text-align: center;
    font-family: Chakra Petch;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    display: flex;
    padding: 12px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer
}

.home-container .btn.btn-default {
    color: #fff;
    border-radius: 53px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    background: linear-gradient(180deg, rgba(61, 66, 68, 0) -40.91%, rgba(158, 170, 176, .62) 132.95%);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .05), 0 10px 10px 0 rgba(0, 0, 0, .1), 0 10px 40px 0 hsla(0, 0%, 100%, .15), inset 0 8px 10px 0 rgba(246, 249, 255, .2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.home-container .btn.btn-default:hover {
    background: linear-gradient(180deg, rgba(3, 212, 152, .1) -40.91%, rgba(3, 212, 152, .62) 132.95%)
}

@media(max-width:768px) {
    .home-container .btn.add-nova-btn {
        display: none
    }
}

.home-container .btn.btn-green {
    color: #322f35;
    border-radius: 999px;
    border: 1px solid hsla(0, 0%, 100%, .1);
    background: #03d498;
    box-shadow: inset 14px 14px 36px 0 hsla(0, 0%, 100%, .4), 0 100px 80px 0 rgba(41, 72, 152, .05), 0 64.81px 46.85px 0 rgba(41, 72, 152, .04), 0 38.52px 25.48px 0 rgba(41, 72, 152, .03), 0 20px 13px 0 rgba(41, 72, 152, .03), 0 8.15px 6.52px 0 rgba(41, 72, 152, .02), 0 4px 3.15px 0 rgba(41, 72, 152, .01)
}

.home-container .btn.btn-green:hover {
    color: #03d498;
    border: 1px solid #03d498;
    background: none;
    box-shadow: none
}

.home-container .btn.btn-green:hover img.icon-right {
    display: none
}

.home-container .btn.btn-green:hover img.icon-right-hover {
    display: block
}

.home-container .btn img.icon-right {
    height: 24px;
    display: block
}

.home-container .btn img.icon-right-hover {
    height: 24px;
    display: none
}

.flex {
    display: flex
}

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

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

.justify-center {
    justify-content: center
}

.justify-start {
    justify-content: start
}

.justify-end {
    justify-content: end
}

.items-center {
    align-items: center
}

.items-start {
    align-items: start
}

.items-end {
    align-items: end
}