html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
/* banner 首页轮播图开始 */
.carousel {
    width: 100vw;
    height: 42.5vw;
    /*max-height: 100vh;*/
    max-height: 980px;
    overflow: hidden;
    position: relative;
}

.carousel-background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.slides {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.slide {
    min-width: 100vw;
    height: 100%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.dots {
    position: absolute;
    bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background: #fff;
    transform: scale(1.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.dot:hover {
    transform: scale(1.2);
}

/* banner 首页轮播图结束 */

/* 首页服务开始 */
.service-home-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

.service-home-title {
    text-align: center;
    margin-bottom: 50px;
}
.s_title_div1{
    color: rgb(68, 68, 68);
    font-size: 24px;
    text-align: center;
    margin-top:80px;
}
.s_content_div1{
    font-size:14px;
}

.services-container {
    position: relative;
    max-width: 1154px;
    margin: 0 auto;
    overflow-x: hidden;
}

/* 为包含卡片的容器添加样式 */
.service-cards {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    padding: 10px;
}

/* 卡片样式 */
.service-card {
    width: 365px;
    height: 320px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #d3d2d2;
    padding-top: 15px;
    flex-shrink: 0; /* 防止卡片缩小 */
}

/* 清除最后一个卡片的 margin-right（如果之前设置了的话） */
.service-cards > .service-card:last-child {
    margin-right: 0;
}

.service-card .slide-title {
    font-size: 18px;
    color: #444444;
    margin-top: 25px; /* 添加顶部外边距以分隔图标和标题 */
    margin-bottom: 7px;
}

.service-card .slide-content {
    line-height: 30px;
    font-size: 14px;
    color: #c2c2c4;
    text-align: center;
    margin-top: 15px; /* 添加顶部外边距以分隔标题和内容 */
}

.service-icon {
    width: 68px;
    height: 68px;
    background-size: contain;
    margin-top: 20px;
}

.left-arrow::before,
.right-arrow::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    border: #666 solid;
    border-width: 2px 2px 0 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.left-arrow::before {
    transform: rotate(225deg);
    left: 10%;
    transform: translate(-50%, -50%) rotate(225deg);
}

.right-arrow::before {
    transform: rotate(45deg);
    right: 10%;
    transform: translate(50%, -50%) rotate(45deg);
}
/* 首页服务结束 */

/* 首页联系开始 */
.contact-container {
    width: 100%;
    /*height: 70vh; !* 使用视口高度单位 vh 可以根据视口高度设置高度 *!*/
    height: auto;
    background-color: white;
    display: flex; /* 使用 Flexbox 布局使内容居中 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 80px 0;
    margin-top: 70px;
}

.contact-section {
    background-image: url('https://www.leagueshipping.com/inc/image/tariff.jpg'); /* 背景图路径 */
    background-size: cover;
    color: white;
    text-align: left; /* 将文本对齐方式改为左对齐 */
    padding: 50px 20px 50px 249px; /* 调整内边距，增加左边距 */
    width: 100%; /* 确保宽度填满容器 */
    height: 60%;
    position: relative; /* 相对定位，以便绝对定位子元素 */
}

.contact-section h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.contact-section p {
    font-size: 16px;
    line-height: 2;
    max-width: 600px;
    margin: 0 0 30px 0; /* 移除自动外边距，使其不居中 */
}

.contact-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f0ad4e; /* 按钮颜色 */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
}

.contact-button:hover {
    background-color: #d89b44; /* 悬停时按钮颜色变深 */
}

.contact-image {
    position: absolute; /* 绝对定位 */
    right: 100px; /* 定位到容器的右边 */
    bottom: 0; /* 定位到容器的底部 */
    max-width: 40%; /* 设置最大宽度，避免过大 */
    height: auto; /* 保持图片的原始宽高比 */
}

@media (max-width: 768px) {

    .contact-section {
        padding: 30px 20px; /* 调整原有左边距 */
    }

    .contact-image {
        position: static; /* 修改移动端定位 */
        margin-top: 30px;
        max-width: 100%;
    }
}
/* 首页联系结束 */