html,
body {
    scrollbar-width: none;

    &::-webkit-scrollbar {
        width: 0px !important;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system, "PingFang SC", "Noto Sans", "Helvetica Neue",
        Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Hiragino Sans GB",
        "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
        "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei",
        "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}

input,
select,
button,
textarea {
    padding: 0px;
    margin: 0px;
    border: none;
    outline: none;
    user-select: auto;
}

input:focus {
    outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="number"] {
    appearance: textfield;
    /* Firefox */
}

button {
    border: none;
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.menu {
    transition: height 422ms cubic-bezier(0.4, 0, 0.6, 1) 80ms,
        background 422ms cubic-bezier(0.4, 0, 0.6, 1) 80ms;
}

.sub-menu {
    transition: height 322ms cubic-bezier(0.4, 0, 0.6, 1) 80ms;
}

.m-submenu-btn.active ~ .m-submenu {
    height: 144px;
}

.m-submenu-btn.active .arrow-icon {
    transform: rotate(180deg);
}

.m-submenu,
.m-submenu-btn .arrow-icon {
    transition: all 322ms cubic-bezier(0.4, 0, 0.6, 1);
}

#menu-status:checked ~ .menu {
    height: 100vh;
}

#menu-status:checked ~ .menu .m-menu-item {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.m-menu-item {
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition-delay: calc(0.2s + (var(--backdrop-item) * 20ms));
    transition-duration: 0.24s;
    transition-property: opacity, transform, visibility;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1),
        cubic-bezier(0.4, 0, 0.6, 1), step-start;
}

.menu-controls-top,
.menu-controls-bottom {
    transition: transform 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.menu-controls-top .menu-controls-line {
    top: 12px;
    transform: translateY(-4px) scaleX(0.8);
}

.menu-controls-bottom .menu-controls-line {
    bottom: 12px;
    transform: translateY(4px) scaleX(0.8);
}

.menu-controls-line {
    width: 18px;
    left: 3px;
    transition: all 0.1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) 0.1008s;
}

#menu-status:checked ~ .menu .menu-controls-top {
    transform: rotate(45deg);
}

#menu-status:checked ~ .menu .menu-controls-bottom {
    transform: rotate(-45deg);
}

#menu-status:checked ~ .menu .menu-controls-line {
    transform: none;
}

.m-menu-item-checkbox:checked ~ .m-menu-item .arrow-icon {
    transform: rotate(-180deg);
}

.animate-move {
    animation: move 50s linear infinite;
}

.animate-move-right {
    animation: move-right 50s linear infinite;
}

.animate-md-move {
    animation: md-move 50s linear infinite;
}

.animate-md-move-right {
    animation: md-move-right 50s linear infinite;
}

@keyframes move {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-2520px);
    }
}

@keyframes move-right {
    from {
        transform: translateX(-2520px);
    }

    to {
        transform: translateX(0px);
    }
}

@keyframes md-move {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-2120px);
    }
}

@keyframes md-move-right {
    from {
        transform: translateX(-2120px);
    }

    to {
        transform: translateX(0px);
    }
}

.asset-link-banner {
    background: url("../images/asset-link-cover.jpg") center center no-repeat;
    background-size: cover;
}

.collapse.active .collapse-icon {
    transform: rotate(45deg);
}

.collapse.active .collapse-title {
    color: #1a85ff;
}

:root {
    --text-1: #101a28;
}

#mask.active {
    opacity: 0;
}

.dialog {
    width: min(86vw, 1200px);
    height: min(86vh, 800px);
    background-color: white;
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
}

.dialog.active {
    opacity: 0;
    transform: translate(-50%, -55%);
}

.intersection {
    transition: all ease-in-out 0.6s;
}

.intersection-left {
    opacity: 0.2;
    transform: translate(-100px, 0);
}

.intersection-right {
    opacity: 0.2;
    transform: translate(100px, 0);
}

.lang-item.active {
    color: #101a28;
}