/* 内容 */
.no-data {
    width: 100%;
    text-align: center;
    font-size: 40rem;
    color: #505050;
    line-height: 100rem;
}

.content {
    width: 100%;
}

.content .visit,
.content .serve,
.content .about,
.content .project {
    width: 100%;
    background-color: #f7f7f7;
}

.content .serve,
.content .about {
    background-color: #ffffff;
}

.content .visit_content,
.content .serve_content,
.content .about_content,
.content .project_content {
    width: 1630rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding-top: 52rem;
    padding-bottom: 65rem;
}

.content .visit .item,
.content .serve .item {
	margin-right: 30rem;
    width: 385rem;
    background-color: #ffffff;
    box-shadow: -7rem 0rem 32rem 0rem rgba(0, 0, 0, 0.13);
    transition: transform 0.3s ease;
    /* 平滑过渡效果 */
}

.content .visit .item:nth-child(4n),
.content .serve .item:nth-child(4n) {
	margin-right: 0rem;
}

.content .serve .item {
    background-color: #f2f2f2;
    box-shadow: none;
    margin: 25rem 0;
	margin-right: 22rem;
}

.content .visit .item:hover,
.content .serve .item:hover {
    transform: scale(1.05);
    font-weight: bold;
}

.content .visit .item .top,
.content .serve .item .top {
    width: 100%;
    height: 390rem;
}

.content .visit .item .top img,
.content .serve .item .top img {
    width: 100%;
    height: 100%;
    vertical-align: bottom;
}

.content .visit .item .bottom,
.content .serve .item .bottom {
    width: 100%;
    height: 130rem;
    display: table-cell;
    vertical-align: middle;
    /* 垂直居中 */
    font-size: 24rem;
    color: #000000;
    padding: 0 17rem;
    box-sizing: border-box;
    line-height: 1.5;
}

.content .serve .item .bottom {
    height: 120rem;
}

.content .visit .item .bottom .ch,
.content .visit .item .bottom .en {
    width: 100%;
}

/* 顶部banner */
.banner .image {
    width: 100%;
    height: 100%;
}

.banner > ul > li {
    position: relative;
}

.banner > ul > li > .image > img {
    width: 100%;
    height: 100%;
    vertical-align: bottom;
}

.service,
.consult {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
}

.service .title,
.consult .title,
.project .title {
    width: 100%;
    text-align: center;
    margin-top: 79rem;
    margin-bottom: 20rem;
    font-size: 38rem;
    line-height: 1;
    color: #505050;
}

.service .desc,
.consult .desc,
.project .desc {
    width: 100%;
    margin-bottom: 47rem;
    font-size: 18rem;
    line-height: 1;
    color: #505050;
    text-align: center;
}

.service .item .bottom {
    width: 385rem !important;
}

.service .item .bottom .ch,
.service .item .bottom .en {
    width: 100%;
    font-size: 18rem;
    color: #000000;
    text-align: center;
}

.service .service_desc {
    width: 1630rem;
    font-size: 22rem;
    color: #2d2d2d;
    margin: 0 auto;
    margin-top: 112rem;
    margin-bottom: 50rem;
    line-height: 1.5;
    text-align: center;
}

.introduce {
    width: 100%;
    margin: 0 auto;
    padding-top: 75rem;
    padding-bottom: 65rem;
    background-color: #f7f7f7;
}

.introduce_content {
    width: 1630rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 16rem;
}

.introduce_content .left {
    width: 574rem;
    background-color: #ffffff;
    box-shadow: -2rem 0rem 32rem 0rem rgba(0, 0, 0, 0.15);
    padding: 65rem 27rem 53rem 24rem;
    box-sizing: border-box;
}

.introduce_content .right .item {
    width: 1041rem;
    background-color: #ffffff;
    box-shadow: -2rem 0rem 32rem 0rem rgba(0, 0, 0, 0.15);
    padding: 41rem 35rem 34rem 35rem;
    box-sizing: border-box;
    margin-bottom: 10rem;
}

.introduce_content .right .item:last-child {
    margin-bottom: 0rem;
}

.introduce_content .title {
    font-size: 24rem;
    line-height: 55rem;
    color: #000000;
    margin-bottom: 30rem;
}

.introduce_content .right .title {
    margin-bottom: 18rem;
    line-height: 24rem;
}

.introduce_content .title .ch {
    display: inline-block;
    line-height: 24rem;
}

.introduce_content .title .en {
    display: inline-block;
    line-height: 24rem;
    font-size: 18rem;
    color: #1a71c4;
}

.introduce_content .content_ch,
.introduce_content .content_en {
    font-size: 16rem;
    line-height: 30rem;
    color: #565656;
    margin-bottom: 20rem;
    text-align: justify;
}

.introduce_content .content_en {
    line-height: 22rem;
}

.introduce_content img {
    display: block;
    width: 523rem;
    height: 480rem;
}

.about {
    box-shadow: -2rem 0rem 32rem 0rem rgba(0, 0, 0, 0.15);
}

.about_content {
    overflow: hidden;
    padding: 106rem 0;
}

.about_content .left {
    width: 736rem;
	margin-right: 79rem;
}

.about_content .left .title {
    width: 100%;
    font-size: 36rem;
    line-height: 36rem;
    color: #414141;
    margin-bottom: 18rem;
}

.about_content .left .desc {
    width: 100%;
    font-size: 18rem;
    line-height: 18rem;
    color: #414141;
    margin-bottom: 52rem;
}

.about_content .left .content_ch,
.about_content .left .content_en {
    width: 100%;
    font-size: 16rem;
    color: #000000;
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 25rem;
    text-indent: 32rem;
}

.about_content .right {
    width: 815rem;
    height: 544rem;
}

.about_content .right img {
    width: 100%;
    height: 100%;
}

.project_content .item {
    width: 523rem;
    background-color: #ffffff;
    box-shadow: -2rem 0rem 32rem 0rem rgba(0, 0, 0, 0.15);
    padding: 70rem 54rem;
    box-sizing: border-box;
    transition: transform 0.3s ease;
    /* 平滑过渡效果 */
	margin: 0 10rem;
	margin-bottom: 10rem;
}

.project_content .item:hover {
    transform: scale(1.05);
    /* 放大到原来的105% */
}

.project_content .item .name,
.project_content .item .detail {
    font-size: 18rem;
    line-height: 1.5;
    color: #1d1d1d;
    font-weight: bold;
    margin-bottom: 25rem;
}

.project_content .item .detail {
    font-size: 16rem;
    font-weight: 500;
    margin-bottom: 35rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* 限制显示的行数为3 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.more {
    display: block;
    width: 140rem;
    height: 47rem;
    background-color: #ffffff;
    border-radius: 20rem;
    border: solid 1rem #0f5da8;
    font-size: 18rem;
    line-height: 47rem;
    color: #0f5da8;
    text-align: center;
    margin: 0 auto;
}

.more:hover {
    background-color: #0f5da8;
    color: #ffffff;
}

.about_content .left .more {
    float: right;
}

.project_content .item .more {
    float: left;
}

.consult_content {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    /* min-height: 100vh; */
    background-color: #ffffff;
    margin: 0;
    padding: 50rem;
    /* 20px */
    box-sizing: border-box;
}

.consultant-carousel {
    width: 100%;
    /*
     * max-width 定义了轮播组件的最大显示宽度。
     * 根据您希望在大屏幕上同时展示多少个顾问卡片来调整这个值。
     * 例如：3个顾问（每个宽283px）+ 它们之间的间距（2个100px间距）
     * 内容区宽度大约是 (283 * 3) + (100 * 2) = 849 + 200 = 1049px。
     * 考虑到组件的内边距和箭头空间，1200rem (1200px) 或 1300rem (1300px) 是一个合理的起点。
     * 您可以根据实际设计调整。
    */
    max-width: 1745rem;
    text-align: center;
    background-color: #fff;
    padding: 20rem 30rem; /* 上下20px, 左右30px */
    border-radius: 8rem; /* 8px */
    /* box-shadow: 0 4rem 15rem rgba(0, 0, 0, 0.1); /* 0 4px 15px */
    box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度 */
    overflow: hidden; /* 防止内部元素意外溢出影响布局 */
}

.carousel-title {
    font-size: 14rem; /* 14px */
    color: #888;
    margin-top: 0; /* 移除了之前的 margin-bottom，如果需要可以加回来 */
    margin-bottom: 25rem; /* 25px */
    text-transform: uppercase;
    letter-spacing: 1rem; /* 1px */
}

.carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 将箭头分布在视口两侧 */
    position: relative;
}

.carousel-arrow {
    background-color: transparent;
    border: none;
    color: #888;
    font-size: 30rem; /* 30px */
    font-weight: bold;
    cursor: pointer;
    padding: 0 10rem; /* 箭头按钮的左右内边距 10px */
    z-index: 10;
    transition: color 0.3s ease;
    flex-shrink: 0; /* 防止箭头在 flex 容器中被压缩 */
    height: 100%; /* 使箭头点击区域尽可能高，但需配合视口高度 */
    line-height: 1; /* 辅助垂直居中 */
    align-self: center; /* 确保箭头在 flex 交叉轴上居中 */
}

.carousel-arrow:hover {
    color: #333;
}

.carousel-arrow.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.carousel-viewport {
    flex-grow: 1; /* 占据箭头之间的所有可用空间 */
    overflow: hidden; /* 这是轮播效果的关键，隐藏超出部分 */
    /* margin: 0 10rem; */ /* 视口和箭头之间的间距，如果箭头在视口外部则需要 */
    /* 如果箭头在视口内部叠加，则不需要 */
}

.carousel-track {
    display: flex; /* 使所有 carousel-item 水平排列 */
    list-style: none;
    padding: 0;
    margin: 0;
    transition: transform 0.5s ease-in-out; /* 滑动动画效果 */
}

.carousel-item {
    /* 照片width: 283px; height: 283px; 两张照片之间距离100px */
    /* 所以每个项目的左右 margin 各为 50px */
    margin: 0 50rem; /* 上下0, 左右各50px (总计100px的项目间距) */
    box-sizing: border-box;
    text-align: center;
    flex-shrink: 0; /* 非常重要！防止项目在 flex 轨道中被压缩变形 */
    /* 为每个卡片内容设定一个基础宽度，确保flex-shrink:0有效。图片本身有宽度。*/
    /* width: 283rem; */ /*  如果图片外层还有其他内容，可能需要给 item 一个宽度 */
    /*  但当前结构，图片的宽度会撑开 item */
}

.item-image-wrapper {
    background-color: #fff; /* 图片包装器背景色 */
    border: 1rem solid #eee; /* 1px 边框 */
    border-radius: 8rem; /* 8px 圆角 */
    padding: 8rem; /* 8px 内边距 */
    margin-bottom: 8rem; /* 8px 图片和文字之间的间距 */
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.05); /* 0 2px 5px 轻微阴影 */
    display: inline-block; /* 使其尺寸包裹图片 */
}

.carousel-item img {
    width: 283rem; /* 283px */
    height: 283rem; /* 283px */
    object-fit: cover; /* 确保图片不变形地填充其容器 */
    display: block; /* 消除图片下方的空白间隙 */
    border-radius: 4rem; /* 4px 图片自身的圆角 */
}

.item-name {
    font-size: 18rem; /* 14px */
    color: #555;
    margin-top: 5rem; /* 5px 名字和图片包装器之间的间距 */
    margin-bottom: 0; /* 确保名字下方没有额外间距 */
}