/*字体配置*/
@font-face {
    font-family: alibaba;
    src: url("../fonts/AlibabaPuHuiTi-3-45-Light/AlibabaPuHuiTi-3-45-Light.otf"),
    url("../fonts/AlibabaPuHuiTi-3-45-Light/AlibabaPuHuiTi-3-45-Light.eot"),
    url("../fonts/AlibabaPuHuiTi-3-45-Light/AlibabaPuHuiTi-3-45-Light.woff") format('woff'),
    url("../fonts/AlibabaPuHuiTi-3-45-Light/AlibabaPuHuiTi-3-45-Light.woff2") format('woff2'),
    url("../fonts/AlibabaPuHuiTi-3-45-Light/AlibabaPuHuiTi-3-45-Light.ttf") format("truetype");
}

/*将页面中所有元素及其伪元素的盒模型设置为 border-box,指定了元素的宽度和高度包括其内边距和边框，但不包括外边距。当将 box-sizing 设置为 border-box 时，元素的宽度和高度将包括内边距和边框的尺寸*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*宽度为830px以上的配置*/
@media (min-width: 830px) {
    /*页面整体配置*/
    body {
        /*页面背景色*/
        background-color: #F4F4F4;
        /*字体初始颜色，其他的div可以覆盖该配置*/
        color: #333333;
        /*页面内边距为0，显示设置是为了覆盖默认样式中的5px*/
        padding: 0;
        /*外边距为0，确保页面整体紧贴着浏览器窗口的边缘*/
        margin: 0;
        /*整体字体设置*/
        font-family: alibaba;
    }

    /*导航栏基本样式*/
    .head-box {
        /*z-index表示样式堆叠时的显示顺序，越大越靠上，当前配置意为该样式优先展示*/
        z-index: 999;
        /*宽度设置为其父元素宽度的 100%。这通常用于确保元素填满其父元素的整个水平空间*/
        width: 100%;
        /*背景颜色为白色*/
        background-color: #fff;
        /*添加了一个盒子阴影。
        0 是水平偏移量，表示阴影在水平方向上不会移动。
        10px 是垂直偏移量，表示阴影在垂直方向上向下移动 10 像素。
        15px 是模糊距离，表示阴影的边缘将有多模糊。
        rgba(200, 200, 200, 0.5) 定义了阴影的颜色和透明度。（R G B alpha透明度0~1）*/
        box-shadow: 0 10px 15px rgba(200, 200, 200, 0.5);
        /*高度为94像素*/
        height: 94px;
        /*将导航栏固定，即使页面滚动也保持原来位置*/
        position: fixed;
    }

    /*导航栏的区域box*/
    .area-box {
        /*最大宽度为1200像素，如果浏览器窗口的宽度大于1200像素，显示不会超过1200像素，如果小于1200像素，将简单地使用窗口的宽度*/
        max-width: 1200px;
        /*上、下外边距为0，并将左、右外边距设置为自动。宽度小于其父元素的宽度时，该元素在水平方向上居中显示。auto值会自动计算左、右外边距，使它们相等，从而将元素居中*/
        margin: 0 auto;
    }

    /*head-box下的head-left样式*/
    .head-box .head-left {
        /*所有具有 .head-left 类的子元素（且其父元素是 .head-box）都将浮动到左侧*/
        float: left;
    }

    /*head-box下的head-right样式*/
    .head-box .head-right {
        /*所有具有 .head-right 类的子元素（且其父元素是 .head-box）都将浮动到右侧*/
        float: right;
    }

    /*head-box下的logo区域样式*/
    .head-box .logo-box {
        /*将元素以表格单元格的方式显示*/
        display: table-cell;
        /*设置垂直对齐方式，display: table-cell与vertical-align: middle一起使用实现垂直居中*/
        vertical-align: middle;
        /*区域高度94像素*/
        height: 94px;
        /*左内边距设置为0，显示设置是为了覆盖默认样式中的10px*/
        padding-left: 0;
    }

    /*head-box下的logo图片样式*/
    .head-box .logo-img {
        /*宽度设置为165像素*/
        width: 165px;
    }

    /*定义了页面上各小节之间的间隔高度*/
    .lh-ge {
        /*高度为30像素*/
        height: 80px;
    }

    /*导航栏的菜单样式，#的引用使用id，.的引用使用class*/
    #main-menu {
        /*内边距为0*/
        padding: 0;
        /*外边距为0*/
        margin: 0;
        /*设置布局为弹性盒布局*/
        display: flex;
    }

    #main-menu a {
        /*将<a>标签的显示方式设置为块级元素。通常，<a>标签是内联元素，这意味着它们只会占据内容所需的空间。但是，设置为block后，<a>标签会占据其父元素的整个宽度*/
        display: block;
        /*移除<a>标签的下划线。默认情况下，浏览器会给<a>标签添加下划线来表示它是一个链接。这个属性用于移除这个下划线。*/
        text-decoration: none;
        /*设置字体颜色*/
        color: #333333;
        /*设置字体大小*/
        font-size: 21px;
        /*设置<a>标签的行高为40像素。行高会影响文本在元素内的垂直对齐方式。*/
        line-height: 95px;
        /*上下内边距为0，左右内边距为20像素*/
        padding: 0 20px;
        /*设置字体粗细*/
        font-weight: 400;
    }

    /*设置导航栏下的a标签的激活样式*/
    #main-menu a.active {
        /*背景颜色*/
        background-color: #c30a0a;
        /*字体颜色*/
        color: #fff;
    }

    /*设置导航栏下的a标签的hover样式*/
    #main-menu a:hover {
        /*背景颜色*/
        background-color: #c30a0a;
        /*字体颜色*/
        color: #fff;
    }

    /*横幅框的样式*/
    .banner-box {
        /*上外边距94像素*/
        padding-top: 94px;
    }

    /*设置横幅图片的样式*/
    .banner {
        /*作为块元素展示*/
        display: block;
        /*上下外边距设置为0，并使其左右外边距自动计算，从而使元素在其父元素的水平方向上居中*/
        margin: 0 auto;
        /*宽度占满整个父元素*/
        width: 100%;
    }

    /*banner-box下的banner-text样式*/
    .banner-box .banner-text {
        /*宽度填满父元素*/
        width: 100%;
        /*文本水平对齐：居中*/
        text-align: center;
        /*位置绝对，脱离正常的文档流，相对于其最近的已定位祖先元素（即position不为static的祖先元素）进行定位。如果没有已定位的祖先元素，那么它会相对于初始包含块进行定位。*/
        position: absolute;
        /*以内联元素的方式呈现（即元素之间不会有换行符）*/
        display: inline-block;
        /*字体颜色*/
        color: #fff;
        /*设置顶部位置为265px*/
        top: 265px;
    }

    /*banner-box下的banner-text下的标题样式*/
    .banner-box .banner-text .title {
        /*字体大小为60*/
        font-size: 60px;
        /*字体颜色*/
        color: #FFFFFF;
        /*字体粗细*/
        font-weight: 500;
    }

    /*banner-box下的banner-text下的标题样式（英文）*/
    .banner-box .banner-text .title-en {
        /*字体大小为60*/
        font-size: 60px;
        /*字体颜色*/
        color: #FFFFFF;
        /*字体粗细*/
        font-weight: 700;
    }

    /*banner-box下的banner-text下的描述样式*/
    .banner-box .banner-text .desc {
        /*字体颜色*/
        color: #FFFFFF;
        /*字体粗细*/
        font-weight: 400;
        /*上方外边距*/
        margin-top: 43px;
        /*字体大小*/
        font-size: 24px;
        /*文本字符之间的间距*/
        letter-spacing: 5.71px;
    }

    /*banner-box下的banner-text下的描述样式（英文）*/
    .banner-box .banner-text .desc-en {
        /*字体颜色*/
        color: #FFFFFF;
        /*字体粗细*/
        font-weight: 500;
        /*上方外边距*/
        margin-top: 43px;
        /*字体大小*/
        font-size: 24px;
        /*文本字符之间的间距*/
        letter-spacing: 5.71px;
    }

    /*目前仅用于占位*/
    .banner-box .banner-text .btn {
        /*上外边距*/
        margin-top: 84px;
    }

    /*TODO 没有看到用到的地方*/
    .banner-box .banner-text .btn button {
        font-size: 24px;
        font-weight: 400;
    }

    /*标题前的上线部分*/
    .title-area:before {
        /*内容*/
        content: ' ';
        /*宽度*/
        width: 40%;
        /*高度*/
        height: 2px;
        /*背景颜色*/
        background-color: #c30a0a;
        /*绝对位置*/
        position: absolute;
        /*贴左边*/
        left: 0;
    }

    /*标题后的下线*/
    .title-area:after {
        /*内容*/
        content: ' ';
        /*宽度*/
        width: 40%;
        /*高度*/
        height: 2px;
        /*背景颜色*/
        background-color: #c30a0a;
        /*绝对位置*/
        position: absolute;
        /*贴右边*/
        right: 0;
    }

    /*关于我们的整体样式*/
    .intro-box {
        /*设置位置为相对，这样元素将相对于其正常位置进行定位，可以与top、right、bottom和left属性一起使用来指定偏移量*/
        position: relative;
    }

    /*关于我们整体布局*/
    .about {
        /*弹性布局*/
        display: flex;
        /*横向布局*/
        flex-direction: row;
        /*当容器内的子项的总大小超过了容器的大小时，子项会自动换行/列*/
        flex-wrap: wrap;
        /*宽度*/
        width: 100%;
    }

    /*四部分整体布局*/
    .top-left, .bottom-left, .top-right, .bottom-right {
        /*元素的 box-sizing 属性设置为 border-box 时，元素的宽度和高度属性（包括 min-width、max-width、min-height、max-height、width 和 height）将包括内容、内边距（padding）和边框（border），但不包括外边距（margin）*/
        box-sizing: border-box;
    }

    /*左上部分*/
    .top-left {
        /*flex中排列顺序*/
        order: 1;
        /*背景色*/
        background-color: #FFFFFF;
        /*flex-grow: 2;：这个值定义了元素的增长因子。如果Flex容器有多余的空间，这个元素会按照它的flex-grow值相对于其他元素的flex-grow值来分配这些多余的空间。在这个例子中，.top-left类的元素会尝试占用两倍于其他flex-grow为1的元素的额外空间。
        flex-shrink: 1;：这个值定义了元素的缩小因子。如果Flex容器的空间不足以容纳所有元素，这个元素会按照它的flex-shrink值相对于其他元素的flex-shrink值来缩小。在这个例子中，.top-left类的元素的缩小因子为1，与其他flex-shrink为1的元素相同。
        flex-basis: 50%;：这个值定义了元素在主轴（默认是水平轴）上的基本尺寸。在这个例子中，.top-left类的元素的基本尺寸会被设置为它父元素宽度的50%。*/
        flex: 2 1 50%;
        /*宽度*/
        width: 70%;
    }

    /*右上部分*/
    .top-right {
        /*flex中排列顺序*/
        order: 2;
        /*宽度*/
        width: 30%;
        /*块级元素*/
        display: block;
    }

    /*左下部分*/
    .bottom-left {
        /*flex中排列顺序*/
        order: 3;
        /*宽度*/
        width: 30%;
        /*右内边距*/
        padding-right: 2px;
        /*块级元素*/
        display: block;
    }

    /*右下部分*/
    .bottom-right {
        /*flex中排列顺序*/
        order: 4;
        /*背景色*/
        background-color: #c30a0a;
        /*flex-grow: 2;：这个值定义了元素的增长因子。如果Flex容器有多余的空间，这个元素会按照它的flex-grow值相对于其他元素的flex-grow值来分配这些多余的空间。在这个例子中，.top-left类的元素会尝试占用两倍于其他flex-grow为1的元素的额外空间。
        flex-shrink: 1;：这个值定义了元素的缩小因子。如果Flex容器的空间不足以容纳所有元素，这个元素会按照它的flex-shrink值相对于其他元素的flex-shrink值来缩小。在这个例子中，.top-left类的元素的缩小因子为1，与其他flex-shrink为1的元素相同。
        flex-basis: 50%;：这个值定义了元素在主轴（默认是水平轴）上的基本尺寸。在这个例子中，.top-left类的元素的基本尺寸会被设置为它父元素宽度的50%。*/
        flex: 2 1 50%;
        /*宽度*/
        width: 70%;
    }

    /* 图片样式 */
    .about_image1 {
        max-width: 100%; /* 最大宽度 */
        height: auto; /* 自适应高度 */
        display: block; /* 块级元素 */
        /*margin: 0 auto; !* 居中 *!*/
        object-fit: cover; /* 按比例缩放图片，填充整个容器 */
    }

    .about_image2 {
        /*max-width: 100%; !* 最大宽度 *!*/
        height: 100%; /* 自适应高度 */
        display: block; /* 块级元素 */
        /*margin: 0 auto; !* 居中 *!*/
        object-fit: cover; /* 按比例缩放图片，填充整个容器 */
    }

    /*第一部分介绍的样式*/
    .intro_first {
        /*外间距*/
        padding: 30px;
        /*字号*/
        font-size: 18px;
        /*设置行高，行高会影响文本在元素内的垂直对齐方式。*/
        line-height: 38px;
        /*字体粗细*/
        font-weight: 550;
        /*字的颜色*/
        color: #333333;
        /*字符间距*/
        letter-spacing: 1px;
    }

    /*第一部分介绍的伪元素样式，不展示*/
    .intro_first::before {
        /*不设置背景图*/
        background-image: none;
        /*对于伪元素（如 ::before 和 ::after），content 属性是必须的。这里的内容设置为一个空字符串（""），意味着这个伪元素将不会显示任何内容（除了背景图片和其他样式）*/
        content: "";
        /*定位设置为绝对定位。这意味着伪元素会相对于其最近的非 static 定位的祖先元素（如果存在）进行定位，或者相对于初始包含块（通常是HTML元素）进行定位。*/
        position: absolute;
        /*top0和left0这两个属性与绝对定位一起使用，将伪元素的顶部和左边分别设置为0，这意味着伪元素会与其父元素的顶部和左边边缘对齐。*/
        top: 0;
        left: 0;
        /*宽度覆盖整个元素区域*/
        width: 100%;
        /*高度覆盖整个元素区域*/
        height: 100%;
        /*背景图不重复*/
        background-repeat: no-repeat;
        /*背景图居中*/
        background-position: center;
        /*背景图片的大小调整为覆盖整个元素区域，同时保持其宽高比*/
        background-size: cover;
        /* 设置伪元素的透明度 */
        opacity: 0.2; /* 0 到 1 之间的值，0 表示完全透明，1 表示完全不透明 */
    }

    /*关于我们中文本的标题*/
    .intro_first .title {
        /*字体颜色*/
        color: #c30a0a;
        /*粗细设置为粗体*/
        font-weight: bold;
    }

    /*第二部分介绍的样式*/
    .intro_second {
        /*背景颜色*/
        background-color: #c30a0a;
        /*字体颜色*/
        color: #FFFFFF;
        /*字号*/
        font-size: 18px;
        /*字体粗细*/
        font-weight: 550;
        /*行高*/
        line-height: 38px;
        /*左外边距*/
        margin-left: 30px;
        /*上内边距*/
        padding-top: 25px;
        /*右内边距*/
        padding-right: 30px;
        /*左内边距*/
        padding-left: 30px;
    }

    /*每个部分的标题区*/
    .title-area {
        /*外边距上右下左*/
        margin: 50px 0 50px 0;
        /*高度*/
        height: 116px;
        /*内边距上右下左*/
        padding: 25px 0 0 15px;
        /*文本居中*/
        text-align: center;
        /*设置位置为相对，这样元素将相对于其正常位置进行定位，可以与top、right、bottom和left属性一起使用来指定偏移量*/
        position: relative;
    }

    .title-area .en {
        /*字号*/
        font-size: 26px;
        /*字体颜色*/
        color: #333333;
        /*字体粗细*/
        font-weight: 700;
    }

    /*标题的中文部分*/
    .title-area .cn {
        /*字号*/
        font-size: 30px;
        /*字体颜色*/
        color: #c30a0a;
        /*字体粗细*/
        font-weight: 600;
    }

    /*某个部分的样式，主要是 专业服务 部分*/
    .case-bg {
        /*设置背景色*/
        background-color: #E7E7E7;
    }

    /*专业服务部分的四个选项卡部分样式*/
    .case-head {
        /*外边距*/
        margin: 0;
        /*内边距*/
        padding: 0;
        /*弹性布局*/
        display: flex;
        /*当容器内的子项的总大小超过了容器的大小时，子项会自动换行/列*/
        flex-wrap: wrap;
        /*宽度占满父元素*/
        width: 100%;
    }

    /*专业服务部分的四个选项卡部分，每一项的样式*/
    .case-head li {
        /*当鼠标悬停在这个<li>元素上时，鼠标的指针会变成一个手形图标（通常用于表示该元素是可点击的）*/
        cursor: pointer;
        /*设置块级元素*/
        display: block;
        /*内边距 上下 左右*/
        padding: 5px 33px;
        /*外边距 上下 左右*/
        margin: 0 10px;
        /*字号*/
        font-size: 18px;
        /*字体颜色*/
        color: #333333;
    }

    /*某一项子标题激活样式*/
    .case-head li.active {
        /*背景色*/
        background: #c30a0a;
        /*字体颜色*/
        color: #FFFFFF;
    }

    /*某一项子标题鼠标悬停样式*/
    .case-head li:hover {
        /*背景色*/
        background: #c30a0a;
        /*字体颜色*/
        color: #FFFFFF;
    }

    /*每个子标题下内容样式*/
    .case-box {
        /*弹性布局*/
        display: flex;
        /*当容器内的子项的总大小超过了容器的大小时，子项会自动换行/列*/
        flex-wrap: wrap;
        /*内边距*/
        padding: 0;
        /*定义 Flex 容器中的子元素在主轴（默认是水平方向）上的对齐方式。flex-start 值意味着子元素将向主轴的起始位置对齐（对于水平方向的主轴，即左对齐）。*/
        justify-content: flex-start;
    }

    /*case-box下的item样式*/
    .case-box .item {
        /*宽度*/
        width: 292px;
        /*外边距*/
        margin: 0 8px 8px 0;
        /*鼠标指针悬停变化*/
        cursor: pointer;
        /*相对位置*/
        position: relative;
    }

    /*case-box下的item激活样式*/
    .case-box .item .active {
        /*背景色*/
        background-color: #c30a0a;
        /*宽度*/
        width: 100%;
        /*高度*/
        height: 100%;
        /*内边距*/
        padding: 30px 30px 0 30px;
        /*字体颜色*/
        color: #FFFFFF;
        /*字号*/
        font-size: 18px;
        /*绝对位置*/
        position: absolute;
        /*left、right、top和bottom都设为0，配合position：absolute意味着元素将填充其父元素的所有可用空间*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    /*联系我们的整体背景样式*/
    .contact-bg {
        /*内边距*/
        padding: 0 0 63px 0;
    }

    /*联系我们的整体样式*/
    .contact-box {
        /*弹性布局*/
        display: flex;
        /*横向布局*/
        flex-direction: row;
        /*宽度*/
        width: 100%;
        /*高度*/
        height: 450px;
        /*上内边距0*/
        padding-top: 0;
    }

    /*左半部分样式*/
    .left-side {
        /*左部分比例为4*/
        flex: 4;
        /*背景颜色*/
        background-color: #c30a0a;
        /*上内边距*/
        padding-top: 50px;
        /*左内边距*/
        padding-left: 50px;
        /*弹性布局*/
        display: flex;
        /*纵向布局*/
        flex-direction: column;
    }

    /*右半部分样式*/
    .right-side {
        /*右部分比例为3*/
        flex: 3;
        /*背景色*/
        background-color: #FFFFFF;
    }

    /*左部分中的顶部样式*/
    .top-section {
        /*比例占1*/
        flex: 1;
        /*左内边距*/
        padding-left: 80px;
        /*上内边距*/
        padding-top: 1px;
    }

    /*左部分中的底部样式*/
    .bottom-section {
        /*比例占1*/
        flex: 1;
        /*上外边距*/
        margin-top: 30px; /* 下方文字与上方内容的间距 */
        /*下外边距*/
        margin-bottom: 20px; /* 下方文字与上方内容的间距 */
    }

    /*联系我们中微信内容框样式*/
    .contact-wechat-box {
        /*弹性布局*/
        display: flex;
        /*放在上层*/
        z-index: 100;
        /*相对位置*/
        position: relative;
        /*宽度填满*/
        width: 100%;
    }

    /*联系我们中红底部分内容的标题样式*/
    .contact-wechat-box .title {
        /*字号*/
        font-size: 14px;
        /*内边距*/
        padding: 95px 0 0 60px;
        /*行高*/
        line-height: 39px;
        /*字体颜色*/
        color: #333333;
        /*字符间隔*/
        letter-spacing: 2px;
        /*字体粗细*/
        font-weight: 600;
    }

    /*联系我们中第二部分内容的正文样式*/
    .contact-wechat-box .desc {
        /*字体颜色*/
        color: #333333;
        /*字符间距*/
        letter-spacing: 2px;
        /*字体粗细*/
        font-weight: 400;
        /*内边距*/
        padding: 43px 0 0 47px;
        /*行高*/
        line-height: 44px;
        /*字体大小*/
        font-size: 18px;
    }

    /*二维码区域样式设置*/
    .contact-wechat-box #qr_code {
        /*宽度*/
        width: 150px;
        /*上内边距*/
        padding-top: 20px;
        /*元素会在一行内显示，与其他inline-block或inline元素并排。可以设置元素的宽度、高度。margin、padding和border的上下左右属性都会有效。*/
        display: inline-block;
    }

    /*二维码区域图片样式设置*/
    .contact-wechat-box #qr_code img {
        /*设置为父元素宽度的100%，做自适应大小调整*/
        width: 100%;
    }

    /*联系我们中第二部分整体样式*/
    .contact-text-box {
        /*背景色*/
        background-color: #FFFFFF;
        /*内边距*/
        padding: 60px 0 0 0;
        /*相对位置，根据top和right为0，紧贴右上*/
        position: relative;
        top: 0;
        right: 0;
        /*高度*/
        height: 400px;
    }

    /*联系我们左部分里上方文本样式*/
    .contact_left_top {
        /*背景色*/
        background-color: #c30a0a;
        /*字体色*/
        color: #fff;
        /*字号*/
        font-size: 20px;
        /*字体粗细*/
        font-weight: 600;
        /*字符间距*/
        letter-spacing: 2px;
        /*行高*/
        line-height: 35px;
        /*上内边距*/
        padding-top: 10px;
    }

    /*联系我们左部分里下方文本样式*/
    .contact_left_bottom {
        /*背景色*/
        background-color: #c30a0a;
        /*字体色*/
        color: #FFFFFF;
        /*自豪*/
        font-size: 18px;
        /*字体粗细*/
        font-weight: 600;
        /*字符间距*/
        letter-spacing: 2px;
        /*行高*/
        line-height: 35px;
        /*左内边距*/
        padding-left: 80px;
        /*上内边距*/
        padding-top: 20px;
    }

    /*二维码右侧竖线样式*/
    .line {
        /*竖线颜色和粗细*/
        border-left: 2px solid #FFFFFF;
        /*竖线高度*/
        height: 150px;
        /*上外边距*/
        margin-top: 20px;
        /*左外边距*/
        margin-left: 7%;
        /*右外边距*/
        margin-right: 8%;
    }

    /*联系我们第二部分中每一项的样式*/
    .contact-text-box .item {
        /*弹性布局*/
        display: flex;
        /*字号*/
        font-size: 18px;
        /*字符间距*/
        letter-spacing: 1.71px;
        /*宽度*/
        width: 100%;
        /*左内边距*/
        padding-left: 100px;
        /*上内边距*/
        padding-top: 10px;
        /*上外边距*/
        margin-top: 0;
        /*下外边距*/
        margin-bottom: 50px;
    }

    /*联系我们第二部分的图片样式*/
    .contact-text-box .item .img {
        /*宽度*/
        width: 30px;
        /*上内边距*/
        padding-top: 0;
    }

    /*联系我们第二部分的标题样式*/
    .contact-text-box .item .title {
        /*行高*/
        line-height: 25px;
        /*字体粗细*/
        font-weight: 600;
    }

    /*联系我们第二部分的内容样式*/
    .contact-text-box .item .content {
        /*行高*/
        line-height: 25px;
        /*字体粗细*/
        font-weight: 600;
    }


    /*页脚前的三个图片格式*/
    .intro-img {
        /*弹性布局展示*/
        display: flex;
        /*外边距设置*/
        margin: 0 0 50px 0;
    }

    /*页脚前的三个图片，每个图片的样式*/
    .intro-img img {
        /*弹性比重*/
        flex: 1;
        /*最大宽度*/
        max-width: 20%;
        /*左侧外边距*/
        margin-left: 120px;
    }

    /*页脚样式*/
    .footer {
        /*背景色*/
        background: #c30a0a;
        /*文本居中*/
        text-align: center;
        /*字体颜色*/
        color: #FFFFFF;
        /*字号*/
        font-size: 18px;
        /*行高*/
        line-height: 30px;
        /*内边距 上下 左右*/
        padding: 50px 0;
        /*字符间距*/
        letter-spacing: 0.5px;
        /*字体粗细*/
        font-weight: 400;
    }

    /*页脚中的a标签样式*/
    .footer a {
        /*字体颜色*/
        color: #fff;
        /*移除或添加文本上的装饰线，如下划线、上划线或删除线*/
        text-decoration: none;
    }

    /*页脚中的img标签样式*/
    .footer img {
        /*高度*/
        height: 20px;
        /*宽度*/
        width: 20px;
    }

    .language-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
    }

    .lang-btn {
        background: none;
        border: none;
        padding: 0;
        color: #666;
        cursor: pointer;
        font-size: inherit;
        transition: color 0.3s ease;
    }

    .lang-btn:hover {
        color: #333;
    }

    .lang-btn.active {
        color: #000;
        font-weight: 600;
    }

    .separator {
        color: #999;
        user-select: none;
    }

    .lang-en {
        font-family: "Times New Roman", Times, serif;
    }
}