@charset "utf-8";

/* CSS Document */
.navbar {
    display: flex;
    overflow: hidden;
    align-items: center;
    /* 垂直居中 */
    flex-wrap: nowrap;
    /* 禁止换行 */
    background-color: #184FB6;
    /* 其他原有样式 */
    font-family: Arial;
    margin-top: 0px;
}

/* 导航栏内的链接 */
.navbar a {
    float: left;
    font-size: 30px;
    color: white;
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
}

/* 下拉容器 */
.dropdown {
    float: left;
    overflow: hidden;
}

/* 下拉按钮 */
.dropbtn {
    font-size: 30px;
    border: none;
    outline: none;
    color: white;
    padding: 20px 20px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* 在鼠标悬停时为导航栏链接添加背景色 */
.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: #104883;
}

/*下拉菜单内容*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    font-size: 80;
}

/* 下拉菜单中的链接 */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* 鼠标悬停时给下拉菜单的链接添加背景色 */
.dropdown-content a:hover {
    background-color: #CCE1FA;
}

/* 鼠标悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

.container {
    max-width: 400px;
    width: 100%;
    float: left;
    padding: 20px;
    padding-left: 20px;

}

/* 轮播容器 */
.css-carousel-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(238, 238, 238, 0.945);
    background-color: #f9f9f9;
    float: left;
    margin: 0 30px 20px 0;
    user-select: text;
}

.css-carousel {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.css-carousel-inner {
    display: flex;
    width: 500%;
    /* 5张图片，每张100%，总共500% */
    height: 100%;
    animation: slide 20s infinite;
    /* 20秒完成一个完整循环 */
}

.css-carousel-item {
    width: 20%;
    /* 每张图片占容器宽度的20% */
    height: 100%;
    position: relative;
    flex-shrink: 0;
}

.css-carousel-item img {
    width: 100%;
    height: 80%;
    object-fit: contain;
}

.css-carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(240, 236, 236, 0), transparent);
    padding: 60px 20px 0px;
    text-align: center;
}

.css-carousel-caption h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.css-carousel-caption p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
    user-select: text;
    font-size: 0.9rem;
    color: #050506;
}

/* CSS动画定义 */
@keyframes slide {

    0%,
    15% {
        /* 0-15%: 显示第一张图片 */
        transform: translateX(0);
    }

    20%,
    35% {
        /* 20-35%: 显示第二张图片 */
        transform: translateX(-20%);
    }

    40%,
    55% {
        /* 40-55%: 显示第三张图片 */
        transform: translateX(-40%);
    }

    60%,
    75% {
        /* 60-75%: 显示第四张图片 */
        transform: translateX(-60%);
    }

    80%,
    95% {
        /* 80-95%: 显示第五张图片 */
        transform: translateX(-80%);
    }

    100% {
        /* 100%: 回到第一张图片 */
        transform: translateX(0);
    }
}

/* 暂停动画的类 */
.css-carousel-inner.paused {
    animation-play-state: paused;
}

.content {
    position: relative;
    top: -1em;
    margin: 0;
    padding: 0;
    padding-top: 2em;
    font-size: 20px;
}

.page-container {
    max-width: 210mm;
    /* A4纸宽度 */
    margin: 0 auto;
    position: relative;
    padding: 0 60px;
    /* 左右边距 */
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    min-height: 100vh;
    margin-top: -38px;
}

.page-container h1 {
    text-align: center;
    margin: 40px 0;
    font-size: 2.5rem;
    color: #050506;
}

.page-container h2 {
    text-align: left;
    margin: 40px 0;
    font-size: 1.5rem;
    color: #050506;
}

.page-container h3 {
    text-align: center;
    margin: 40px 0;
    font-size: 1.2rem;
    color: #050506;
}

/* 左右边距背景色 */
.page-container::before,
.page-container::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100vw - 210mm) / 2 + 60px);
    /* 动态计算边距宽度 */
    background-color: #f0f8ff;
    /* 浅蓝色背景 */
    z-index: -1;
}

.page-container::before {
    left: 0;
}

.page-container::after {
    right: 0;
}

.rectangle {
    width: 2300px;
    height: 120px;
    background: #ffffff;
    position: relative;
    z-index: 2;
    margin-top: 0px;
}

body {
    margin: 0;
    padding: 0;
}

/* 在 websitefortest.css 中添加 */
/* 中英文切换样式 */
:lang(zh) [data-en]::before,
:lang(en) [data-zh]::before {
    display: none !important;
}

:lang(en) [data-en] {
    display: inline;
}

:lang(en) [data-zh] {
    display: none;
}

:lang(zh) [data-zh] {
    display: inline;
}

:lang(zh) [data-en] {
    display: none;
}

/* 语言切换按钮样式 */
.language-switcher {
    margin-left: auto;
    background-color: #184FB6;
}

.language-switcher button {
    font-size: 16px;
    color: white;
    background: none;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-family: Arial;
}

.language-switcher button:hover {
    background-color: #104883;
}

.current-lang {
    font-weight: bold;
    text-decoration: underline;
}

#contact3c {
    white-space: pre-line;

}

.css-carousel-item {
    position: relative;
    /* 确保 caption 相对于该项定位 */
}