/*字体配置*/
@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;
}

/*页面整体配置*/
body {
    /*页面背景色*/
    background-color: #F4F4F4;
    /*字体初始颜色，其他的div可以覆盖该配置*/
    color: #333333;
    /*页面内边距为5px，内边距是内容（如文本、图片等）与其边框之间的空间。在这里，所有四个方向（上、右、下、左）的内边距都设置为 5px*/
    padding: 5px;
    /*外边距为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);
}

/*导航栏的区域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;
    /*区域高度40像素*/
    height: 40px;
    /*左内边距10像素*/
    padding-left: 10px;
}

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

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

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

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

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

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

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

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

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

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

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

/*banner-box下的banner-text下的描述样式*/
.banner-box .banner-text .desc {
    /*字体颜色*/
    color: #FFFFFF;
    /*字体粗细*/
    font-weight: 400;
    /*上方外边距*/
    margin-top: 23px;
    /*字体大小*/
    font-size: 14px;
    /*文本字符之间的间距*/
    letter-spacing: normal; /*TODO 手动新加的，需要观察*/
}

/*banner-box下的banner-text下的描述样式（英文）*/
.banner-box .banner-text .desc-en {
    /*字体颜色*/
    color: #FFFFFF;
    /*字体粗细*/
    font-weight: 500;
    /*上方外边距*/
    margin-top: 23px;
    /*字体大小*/
    font-size: 14px;
    /*文本字符之间的间距*/
    letter-spacing: normal; /*TODO 手动新加的，需要观察*/
}

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

/*TODO 没有看到用到的地方*/
.banner-box .banner-text .btn button {
    background-color: transparent;
    border: solid 1px #fff;
    color: #FFFFFF;
    padding: 1px 9px;
    font-size: 14px;
}

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

/*关于我们整体布局*/
.about {
    /*弹性布局*/
    display: flex;
    /*纵向布局*/
    flex-direction: column;
    /*当容器内的子项的总大小超过了容器的大小时，子项会自动换行/列*/
    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;
    /*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: 100%;
}

/*第二部分图片不展示*/
.top-right {
    /*flex中排列顺序*/
    order: 2;
    /*宽度*/
    width: 150px;
    /*不展示*/
    display: none;
}

/*第三部分图片不展示*/
.bottom-left {
    /*flex中排列顺序*/
    order: 3;
    /*宽度*/
    width: 150px;
    /*不展示*/
    display: none;
}

/*下部分*/
.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: 100%;
}

/*第二部分图片*/
.about_image1 {
    /*最大宽度*/
    max-width: 100%;
    /*自适应高度*/
    height: auto;
    /*块级元素*/
    display: block;
}

/*第三部分图片*/
.about_image2 {
    /*最大宽度*/
    max-width: 100%; /* 最大宽度 */
    /*块级元素*/
    display: block;
    /*按比例缩放图片，填充整个容器*/
    object-fit: cover;
}

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

/*第一部分介绍的伪元素样式*/
.intro_first::before {
    /*区域背景图*/
    background-image: url("about_us_left.png");
    /*对于伪元素（如 ::before 和 ::after），content 属性是必须的。这里的内容设置为一个空字符串（""），意味着这个伪元素将不会显示任何内容（除了背景图片和其他样式）*/
    content: "";
    /*定位设置为绝对定位。这意味着伪元素会相对于其最近的非 static 定位的祖先元素（如果存在）进行定位，或者相对于初始包含块（通常是HTML元素）进行定位。*/
    position: absolute;
    /*top0和left0这两个属性与绝对定位一起使用，将伪元素的顶部和左边分别设置为0，这意味着伪元素会与其父元素的顶部和左边边缘对齐。*/
    top: 0;
    left: 0;
    /*宽度覆盖整个元素区域*/
    width: 100%;
    /*根据图片原始大小，101正好覆盖上下两部分介绍的*/
    height: 101%;
    /*背景图不重复*/
    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;
    /*字符间距*/
    letter-spacing: 1px;
    /*字号*/
    font-size: 12px;
    /*字体粗细*/
    font-weight: 550;
    /*行高*/
    line-height: 25px;
    /*上内边距*/
    padding-top: 25px;
    /*右内边距*/
    padding-right: 30px;
    /*左内边距*/
    padding-left: 30px;
}

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

/*标题的英文部分*/
.title-area .en {
    /*字号*/
    font-size: 14px;
    /*字体颜色*/
    color: #333333;
    /*字体粗细*/
    font-weight: 700;
}

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

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

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

/*专业服务部分的四个选项卡部分，每一项的样式*/
.case-head li {
    /*当鼠标悬停在这个<li>元素上时，鼠标的指针会变成一个手形图标（通常用于表示该元素是可点击的）*/
    cursor: pointer;
    /*设置块级元素*/
    display: block;
    /*内边距 上下 左右*/
    padding: 5px 5px;
    /*外边距 上下 左右*/
    margin: 0 1px;
    /*字号*/
    font-size: 16px;
    /*字体颜色*/
    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 10px;
    /*定义了容器内项目（子元素）在主轴（对于Flexbox来说，默认是水平轴）上的对齐方式，容器内的项目在主轴上均匀分布，首个项目位于主轴的起始位置，最后一个项目位于主轴的结束位置，而剩余的空间则在项目之间平均分配*/
    justify-content: space-between;
}

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

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

/*联系我们的整体背景样式*/
.contact-bg {
    /*内边距都为0，占满空间*/
    padding: 0 0 0 0;
}

/*联系我们的整体样式*/
.contact-box {
    /*弹性布局*/
    display: flex;
    /*纵向布局*/
    flex-direction: column;
    /*宽度*/
    width: 100%;
}

/*上半部分样式*/
.left-side {
    /*上部分比例为2*/
    flex: 2;
    /*背景颜色*/
    background-color: #c30a0a;
    /*弹性布局*/
    display: flex;
    /*纵向布局*/
    flex-direction: column;
}

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

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

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

/*联系我们中微信内容框样式*/
.contact-wechat-box {
    /*弹性布局*/
    display: flex;
}

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

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

/*二维码区域样式设置*/
.contact-wechat-box #qr_code {
    /*宽度*/
    width: 105px;
    /*上内边距*/
    padding-top: 35px;
    /*元素会在一行内显示，与其他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: 10px 0 30px 0;
}

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

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

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

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

/*联系我们第二部分的图片样式*/
.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: 20px 0 0 0;
}

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

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

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

.footer img {
    /*高度*/
    height: 20px;
    /*宽度*/
    width: 20px;
}


.language-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    /*右内边距*/
    padding-right: 5px;
}

.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;
}