@font-face {
    font-family: Inter;
    src: url('../fonts/Inter/Inter-var-2.ttf') format('truetype');
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter ";
    user-select: none;
}

body,
html {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    min-width: 1200px;
    overflow-x: scroll
}


header {
    padding: 36px;
    width: 100%;
    /* height: 976px; */
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    position: relative;
}

header>nav {
    font-weight: 700;
    font-size: 16px;
    color: #CBCBCB;
    width: 60%;
    /* height: 24px; */
    margin: 0 auto;
    display: flex;
    justify-content: baseline;
    align-items: center;
    flex-wrap: wrap;
    /* padding: 0 20px; */
    white-space: nowrap;
}

.language-icon {
    color: #000;
    display: block;
    width: 5px;
    height: 5px;
    object-fit: cover;
    /* margin-right: 10px; */
}

nav>select>option>.language-icon>img {
    width: 100%;
    height: 100%;
    /* margin-right: 10px; */
}

nav>.onfocus {
    color: #000;
    font-size: 20px;
    margin-right: 18px;
}

nav>.tag {
    width: 15%;
    margin: 0 10px;
    white-space: nowrap;
}

nav>.tag>.layui-icon-up {
    display: inline-block;
    /* transform: rotate(180deg); */
    transform-origin: center;
    line-height: 100%;
    transition: transform 0.2s ease-in-out;
}

/* nav>.tag:active>.layui-icon-up {
    transform: rotate(180deg);
    animation-fill-mode: forwards
} */




nav>.more {
    display: block;
    border: none;
    outline: none;
    background-color: transparent;
    width: 1.5em;
    height: 1.5em;
    margin-right: 10px;
    /* margin-left: 5px; */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(../images/navMore.png);
}

.onfocus::before {
    content: "↗";
    width: 10px;
    height: 10px;
    left: 0;
    top: 50%;
}

.onfocus>.layui-icon-up {
    font-weight: 800;
}


.spot {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 1em;
    margin-top: 6px;
}

header>#logo {
    font-weight: 700;
    top: 24px;
    position: absolute;
}

#logo {
    position: absolute;
    left: 0;
    display: flex;
    width: 233px;
    height: 50px;
}

#logo a img {
    display: inline-block;
    height: 80px;
}

#logo>.name {
    margin-left: 10px;
    display: inline-block;
    line-height: 50px;
    vertical-align: text-bottom;
    color: #FFF;
    font-size: 32px;
}

.blue {
    background: #2662FF;
}

.slogan {
    /* min-width: 17em; */
    height: 149px;
    margin: 200px auto;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: 1000;
    /* font-size: 100px; */
    font-size: calc(100vw / 30 * 1.5);
    line-height: 149px;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    color: #FFF;
    white-space: nowrap;
    overflow: hidden;
}

.co-slogan {
    height: 69px;
    margin: 20px auto;
    /* min-width: 32em; */
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: 50px;
    text-align: center;
    text-transform: uppercase;
    color: #FFF;
    white-space: nowrap;
}



.layui-menu-body-title,
.layui-dropdown.layui-border-box.layui-panel.layui-anim.layui-anim-downbit,
.layui-menu.layui-dropdown-menu {
    background: #000;
    border-color: #000;
    color: #fff !important;
}

.layui-dropdown.layui-border-box.layui-panel.layui-anim.layui-anim-downbit,
.layui-panel.layui-menu-body-panel {
    border-radius: 8px;
    color: #fff;
    background: #000;
}

.layui-dropdown.layui-border-box.layui-panel.layui-anim.layui-anim-downbit,
.layui-panel.layui-menu-body-panel {

    border-radius: 8px;
    background-color: #000;
    border-color: #000;
    /* 设置背景颜色为白色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    font-weight: 400;
}

/* 鼠标悬停效果 */
.layui-dropdown.layui-border-box.layui-panel.layui-anim.layui-anim-downbit:hover,
.layui-panel.layui-menu-body-panel:hover {
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.25);
    /* 悬停时阴影加深 */
    background-color: #000;
}




@media screen and (max-width: 800px) {
    body {
        /* min-width: 580px; */
        overflow-x: hidden;
    }

    header {
        padding: 20px;
        height: 600px;
    }

    header>nav {
        width: 100%;
        margin-top: 90px;
    }

    nav>.tag {
        display: none;
        font-size: 2.5rem;
    }

    nav>.more {
        width: 2.5em;
        height: 2.5em;
        display: flex;
        right: 10px;
        position: fixed;
        right: 2em!important;
        top: 40px;
    }

    .layui-icon-up {
        font-size: 2.5rem;
    }

    nav>.onfocus {
        margin-right: 60px;
    }


    .manu{
        font-size: 3rem;
    }
    .info{
        font-size: 2rem;
    }

    .slogan {
        font-size: 4rem;
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .co-slogan {
        font-size: 3rem;
        /* margin-top: 20px; */
        letter-spacing: 20px;
    }

    .dropdown {
        right: 5em!important;
        transform-origin: top right;
        transform: scale(2);
    }

}