/* basic */
* {
    margin: 0;
    padding: 0;
    font-size: 2vmin;

    --theme_black: #171717;
    --theme_white: hsl(0, 0%, 97%);
    --theme_green_deep: #17f700;
    /* --theme_blue_deep: #1b6db9; */
    --theme_orange_deep: #e04511;
    --theme_orange_light: #FFD3B6;
    --theme_orange_mid: #f5a773;
    --theme_blue_light: #E0F2F7;
    --theme_lue_mid: #E0F2F7;
    --theme_yellow_deep: #ddaa10;
    --theme_yellow_light: #FFF2CC;
    --theme_yellow_mid: #f1d06f;
    --theme_red_deep: #e21010;
    --theme_red_light: #FFCCCC;
    --theme_red_mid: #ef7474;

    --theme-blue-deep: #131BFF;
    --theme-blue-mid: #05C2FF;
    --theme-text-primary: #01010C;
    --theme-text-invert: #FBFAFE;
    --theme-text-secondary: #9499A0;
    --theme-purple-bright: #C189FF;
    --theme-cyan-bright: #18E1F3;
    --theme-black: #01010C;
    --theme-green-bright: #2EE76F;
    --theme-green-deep: #17f700;
    --theme-orange-bright: #FA9B26;
    --theme-red-bright: #FF6359;
    --theme-blue-bright: #5C9CFF;
    --theme-blue-dark: #182799;
    --theme_bg_primary: #0a0d3a;
    --theme-gray-bright: #f0f0f0;
    --font-family: "Roboto";
    --theme-font-family: "Roboto";
}

img,
p {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

img {
    pointer-events: none;
}

ul,
li {
    list-style: none;
}

div,
section,
main,
nav,
footer {
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-direction: row;
}

a {
    text-decoration: none;
    /* 移除下划线 */
    color: inherit;
    /* 继承父元素的文字颜色 */

    cursor: pointer;
}

::-webkit-scrollbar {
    display: none
}

/* 选中文本时的颜色 */
/* ::-moz-selection {
    background-color: var(--theme_green_deep);
    color: var(--theme_black)
}

::selection {
    background-color: var(--theme_green_deep);
    color: var(--theme_black)
} */

video::-webkit-media-controls {
    display: none !important
}

body {
    display: block;
    width: 100%;
    /* background-color: #6b7075; */
    /* background-color: #000; */
}

@media screen and (max-aspect-ratio: 3/2) {
    * {
        font-size: 1vmax;
    }
}

#scrollbar {
    position: fixed;
    left: 0;
    width: .3rem;
    width: .2rem;
    height: 100%;
    z-index: 10000000;
    overflow: hidden
}

#scrollbar:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--theme-blue-deep);
    /* background-color: var(--theme_green_deep); */
    border-radius: 10rem;
    transform-origin: top;
    transform: translateY(calc((1 - var(--p))*-100%))
}

#home {
    position: relative;
    flex-direction: column;
    width: 100%;
    /* overflow: hidden; */
    /* overflow: 因为sticky被注释掉*/
    background-color: var(--theme-text-invert);
}

#app {
    flex-direction: column;
}

/* menu box start */
#menubox {
    width: 100%;
    position: fixed;
    z-index: 99;
    z-index: 999999999;
    /* background-color: burlywood; */
}

/* 菜单栏网格背景 */
#menubox .menu-content::before {
    --size: 45px;
    --line: color-mix(in lch, canvasText, transparent 70%);
    content: '';
    height: 30rem;
    width: 100%;
    position: absolute;
    background: linear-gradient(90deg, var(--line) 1px, #00000000 1px var(--size)) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
    mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: 1;
}


#menubox .logo-wrapper {
    position: fixed;
    z-index: 9999;
    left: 3rem;
    top: 3.5rem;
    transform: translateY(-50%);
    justify-content: center;

    align-items: center;
}

#menubox .logo-wrapper .logo {
    width: 100%;
    height: auto;
    width: 15rem;
    height: 8rem;
    object-position: center;
}

#menubox .logo-wrapper .logo-black {
    color: var(--theme-text-primary);
}

#menubox .logo-wrapper .logo-hidden {
    opacity: 0;
}

#menubox .navigation-wrapper {
    width: 100%;
    position: fixed;
    justify-content: flex-end;
    align-items: center;
    top: 3.5rem;
    transform: translateY(-50%);
    right: 4rem;
}

#menubox .navigation-wrapper .menubox_navigation_menuicon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 2rem;
    cursor: pointer;
    overflow: visible;

}

.menubox_navigation_menuicon circle {
    fill: var(--theme-green-bright);

}

.menubox_navigation_menuicon_hidden line:first-of-type {
    transform: translateY(-13%);
    stroke-dasharray: 13 12 25;
    /* transform: translateX(-27%); */
    /* stroke-dashoffset: 25; */
}

.menubox_navigation_menuicon:hover line:first-of-type {
    stroke-dashoffset: 25;
}


.menubox_navigation_menuicon line {
    stroke: var(--theme_black);
    stroke-width: 6;
    stroke-linecap: round;
    transform-origin: center;
    transition: transform .4s ease, stroke-dashoffset .4s ease, stroke-dasharray .4s ease;
}

.menubox_navigation_menuicon_hidden line:nth-of-type(2) {
    transform: translateY(13%);
    stroke-dasharray: 12.5 0 12.5;
}

.menubox_navigation_menuicon_open line:nth-of-type(1) {
    transform: rotate(-45deg);
}

.menubox_navigation_menuicon_open line:nth-of-type(2) {
    transform: rotate(45deg);
}



.navigation-wrapper .navigation-contact {
    text-decoration: none;
    display: inline-flex;
    text-align: center;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 8.5rem;
    height: 2.2rem;
    border: .12rem solid var(--theme-text-invert);
    border-radius: 1.5rem;
    transition: background-color .4s ease .0s;

    cursor: pointer;
    overflow: hidden;
}

/* added for bg control */
.navigation-contact-black {
    background-color: var(--theme-text-primary);
}

.navigation-wrapper .navigation-contact:hover:before,
.navigation-wrapper .navigation-contact:hover:after {
    transform: translateX(0);
}

.navigation-wrapper .navigation-contact:before,
.navigation-wrapper .navigation-contact:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    transform: translateX(-100%);
    z-index: 0;
}

.navigation-wrapper .navigation-contact:before {
    background-color: var(--theme-text-invert);
    transition: transform .4s ease;
}

.navigation-wrapper .navigation-contact:after {
    background-color: var(--theme-green-bright);
    transition: transform .4s ease .1s;
}

.navigation-wrapper .navigation-contact p {
    position: absolute;
    font-family: var(--font-family);
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--theme-text-invert);
    letter-spacing: .08rem;
    transition: color .4s ease, transform .4s ease;
    transform: translateX(-13%);
    z-index: 1;
}

.navigation-wrapper .navigation-contact:hover p {
    color: var(--theme-text-primary);


    transform: translateX(0%);
}

.navigation-wrapper .navigation-contact svg {
    position: absolute;
    width: .9rem;
    height: .9rem;
    transform: translateX(320%);
    transition: transform .4s ease;
}

.navigation-wrapper .navigation-contact:hover svg {
    transform: translateX(530%);
}

.navigation-wrapper .navigation-contact svg line,
.navigation-wrapper .navigation-contact svg polyline {
    fill: none;
    stroke: var(--theme-green-bright);


    stroke-width: 8;
    stroke-linecap: round;
}

#menubox .menu-content {
    /* align-items: flex-end; */
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    background-color: var(--theme-text-invert);
    width: 100%;
    height: 50vh;
    padding-bottom: 4rem;
    border-radius: 0 0 10rem 10rem;
    /* display:none; */
    transform: translate(0, -60vh);
    transition: transform .6s cubic-bezier(0.77, 0, 0.18, 1), border-radius .6s ease;

}

#menubox .menu-content-show {
    border-radius: 0 0 0rem 0rem;
    transform: translate(0, 0);

}

.menu-content .menu-list-wrapper {
    margin-top: 5rem;
}

.menu-content .menu-list .menu-item {
    transform-origin: left;
    transform: scaleX(1.4) scaleY(1.5);
}

.menu-content .menu-list .menu-item span {
    font-family: "Braah One", sans-serif;
    ;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2;
    /* letter-spacing: -.1rem; */
    text-transform: uppercase;
    -webkit-text-stroke: .1rem var(--theme-text-primary);

}

.menu-content .menu-list .menu-item span:before {
    content: attr(text);
    position: absolute;
    /* letter-spacing: -.2rem; */

    color: #00000000;
    /* color: var(--theme_green_deep); */
    transform: translateX(.2rem);
    transition: color .3s ease, -webkit-text-stroke .3s ease, transform .3s ease;
    z-index: -1;
}

.menu-content .menu-list .menu-item:hover span:before {
    color: var(--theme_green_deep);
    transform: translateX(.4rem);
}

.menu-content .menu-list .menu-item-selected span:before {
    color: var(--theme_green_deep);
    transform: translateX(.4rem);
}

.menu-content .menu-list .menu-item-current span:before {
    color: var(--theme_green_deep);
    transform: translateX(.4rem);
}

.menu-content .menu-get-touch {
    margin-top: 7rem;
    margin-right: 5rem;
    flex-direction: column;
    padding-left: 3rem;
}

.menu-content .menu-get-touch .page-abbrevation {
    width: 24rem;
    height: 13.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.menu-content .menu-get-touch .page-abbrevation img {
    object-fit: cover;
    object-position: center;
}




/* footer start */
.footer-block {
    background-color: var(--theme-text-invert);
    flex-direction: column;
}

.footer-block .footer-scroll-bar {
    width: 100%;
    padding-top: 7rem;
    height: 25rem;
    overflow: hidden;
}

.footer-scroll-bar .inner {
    /* width: 100%; */
    position: relative;
    flex-direction: row;
}

.inner .banner {
    display: block;
    position: relative;
    /* transform: translate(10rem, 0); */
}

.inner .banner .banner-text {
    font-size: 11rem;
    font-family: var(--font-family);
    color: var(--theme-blue-deep);
    white-space: nowrap;

    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
}

.inner .banner:nth-child(1) {
    animation: infinite-scroll-one 100s linear infinite -50s;
}

.inner .banner:nth-child(2) {
    animation: infinite-scroll-two 100s linear infinite;
    /* transform: translate(-100%, 10%); */
}

@keyframes infinite-scroll-one {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes infinite-scroll-two {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-200%);
    }
}




.footer-block .footer-content-wrapper {
    width: 100%;
    /* height: 70vh; */
    margin-bottom: 2rem;
    align-items: center;
    justify-content: start;
    flex-direction: column;
}

.footer-block .footer-content-wrapper .footer-content-inner {
    width: 90%;
    justify-content: space-between;
}

.footer-content-inner .footer-content-left {
    flex-direction: column;
    width: 30rem;
    /* border: 1px solid orange; */
}

.footer-content-inner .footer-content-left .footer-logo-wrapper {
    width: 10rem;
    /* height: 15rem; */
    overflow: hidden;
}

.footer-content-inner .footer-content-left .footer-logo-wrapper img {
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.footer-content-left .newsletter span {
    font-family: var(--font-family);
    font-size: 3rem;
    font-weight: 500;
    color: var(--theme-text-primary);

}

.footer-content-inner .footer-content-right {
    width: 45rem;
    justify-items: flex-end;
    /* border: 1px solid orange; */
    justify-content: space-around;
}

.footer-content-inner .footer-content-right .footer-content-right-wrapper {
    flex-direction: column;
    width: 1fr;
    justify-content: left;
}

.footer-content-right .footer-content-right-wrapper p {
    font-family: var(--font-family);
    font-size: 3rem;
    margin-bottom: 1rem;
}

.footer-content-right .footer-content-right-wrapper ul li {
    margin-bottom: 1rem;
}

.footer-content-right .footer-content-right-wrapper ul li span {
    font-family: var(--font-family);
    font-size: 1.2rem;
}

.footer-content-right .footer-content-right-wrapper ul li span:hover {
    color: var(--theme-text-secondary);
    cursor: pointer;
}

.footer-block .footer-content-bottom {
    width: 90%;
    border-top: 1px solid var(--theme-text-secondary);
    justify-content: space-between;
}

.footer-content-wrapper .footer-content-bottom span {
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--theme-text-primary);
}

/* for test*/
/* From Uiverse.io by vinodjangid07 */
.footer-block .input-wrapper {
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: fit-content;
    height: 2rem;
    border-radius: 2rem;
    padding: 1rem;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    /* background-color: #292524; */
    /* background-color: var(--theme-blue-deep); */
    border: 1px solid var(--theme-blue-deep);
}

.footer-block .icon {
    width: 2rem;
    /* fill: rgb(255, 255, 255); */
    fill: var(--theme-blue-deep);
    margin-left: .6rem;
    transition: all 0.3s;
}

.footer-block .input {
    max-width: 14rem;
    height: 100%;
    border: none;
    outline: none;
    padding-left: 15px;
    /* background-color: #292524; */
    background-color: var(--theme-text-invert);
    /* color: white; */
    border-radius: 3rem;
    font-size: 1rem;
}

.footer-block .input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #292524 inset;
    -webkit-text-fill-color: #ffffff;
}

.footer-block .Subscribe-btn {
    height: 180%;
    width: 6rem;

    border: none;
    border-radius: 2rem;
    /* color: rgb(0, 0, 0); */
    color: white;

    cursor: pointer;
    /* background-color: #ffffff; */
    background-color: var(--theme-blue-deep);
    font-weight: 500;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s;
}

.footer-block .arrow {
    /* display: none; */
    position: absolute;
    margin-right: 8rem;
    transition: all 0.3s;
}

.footer-block .input-wrapper:active .icon {
    transform: scale(1.3);
}

.footer-block .Subscribe-btn:hover {
    color: var(--theme-blue-deep);
}

.footer-block .Subscribe-btn:hover .arrow {
    margin-right: 0;
    animation: jello-vertical 0.9s both;
    transform-origin: right;
    fill: var(--theme-text-invert);
}

@keyframes jello-vertical {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(0.75, 1.25, 1);
    }

    40% {
        transform: scale3d(1.25, 0.75, 1);
    }

    50% {
        transform: scale3d(0.85, 1.15, 1);
    }

    65% {
        transform: scale3d(1.05, 0.95, 1);
    }

    75% {
        transform: scale3d(0.95, 1.05, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

.footer-block .Subscribe-btn:active {
    transform: scale(0.9);
}


/* popup dialog start */
.popup-dia {
    display: none;
    position: fixed;
    width: 30rem;
    height: 8rem;
    align-items: center;
    justify-content: center;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    z-index: 999999999999999;

    border: 1px solid black;
    border-radius: 1rem;
    background-color: #ffffff;

    animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: both;
    /* 保持结束状态 */

}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -70%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -60%);

    }
}

.popup-cross {
    position: absolute;
    right: 3rem;
    top: 1rem;
}

.popup-cross:hover {
    animation: crossshake .3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes crossshake {
    0% {
        rotate: 0deg;
    }

    70% {
        rotate: 30deg;
    }

    100% {
        rotate: 0deg;
    }

}

/* popup dialog end */
/* base end */