/* 首页内容样式 */
.index-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 清除浮动 */
.clearfix {
    clear: both;
}

/* 卡片样式 */
.card {
    border-radius: 3px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
}

.card:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}

/* 大屏布局 - 左右结构 */
.main-layout {
    width: 100%;
}

.left-section {
    float: left;
    width: 30%;
}

.right-section {
    float: right;
    width: 69%;
    height: 735px;
}

/* 服务项目列表 */
.services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
}

.service-item {
    width: 100%;
    margin-bottom: 0;
    border-bottom: 1px solid gray;
    background: #fff;
    height: 14.2857%; /* 7个服务项，每个占1/7高度 */
}

.service-image {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.service-image:hover {
    opacity: 0.9;
}

/* 右侧内容区域 */
.promo-section {
    width: 50%;
    float: left;
    height: 60%;
    /* border-radius: 8px; */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.news-section {
    width: 49%;
    float: right;
    height: 60%;
    height: 441px;
    cursor: pointer;
    color: #fff;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 441px;
}

.news-header {
    padding: 6% 10%;
    border-bottom: 1px solid gray;
    background: rgb(30, 30, 30);
}

.news-item {
    padding: 6% 10%;
    border-bottom: 1px solid gray;
    background: rgb(30, 30, 30);
    height: 25%;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item:hover {
    opacity: 0.8;
}

.news-date {
    color: gray;
    margin: 0 0 5px;
}

.news-title {
    margin: 0;
}

.news-title a {
    color: #fff;
    text-decoration: none;
}

.news-title a:hover {
    color: #428bca;
}

.bottom-banner {
    width: 100%;
    height: 39%;
    float: left;
    margin-top: 1%;
    /* border-radius: 8px; */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.promo-image {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    cursor: pointer;
}

.promo-image:hover {
    opacity: 0.9;
}

/* 文本内容 */
#txt {
    width: 100%;
    margin: 20px 0;
}

/* 广告网格 */
.ad-items {
    width: 100%;
    max-height: 400px;
}

.ad-item {
    width: 24.6%;
    float: left;
    margin-right: 0.52%;
    cursor: pointer;
    margin-top: 0.6%;
}

.ad-image {
    width: 100%;
    /* height: 350px; */
    /* border-radius: 3px; */
    cursor: pointer;
    object-fit: cover;
    object-position: center;
}

/* 当图片高度大于宽度时居中显示而不是铺满 */
.ad-image.portrait {
    object-fit: contain;
    /* background-color: #000; */
}

.ad-image:hover {
    opacity: 0.9;
}

.full-width-banner {
    width: 100%;
    margin: 5px 0 15px;
    float: left;
}

.full-width-banner img {
    width: 100%;
    /* height: 140px; */
    cursor: pointer;
}

.full-width-banner img:hover {
    opacity: 0.9;
}

/* 平板设备响应式 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .left-section,
    .right-section {
        float: none;
        width: 100%;
    }
    
    .right-section {
        height: auto;
    }
    
    .promo-section,
    .news-section {
        height: auto;
        margin-bottom: 20px;
        width: 49%;
        float: left;
    }
    
    .news-section {
        float: right;
    }
    
    .bottom-banner {
        height: auto;
        margin-bottom: 20px;
        width: 100%;
        float: none;
    }
    
    .services-list {
        display: flex;
        flex-wrap: wrap;
    }
    
    .service-item {
        flex: 0 1 30%; /* 每行3个，不放大只缩小 */
        border-bottom: 1px solid gray;
        border-right: none;
        height: auto;
        padding: 10px 0;
        margin-right: 1.5%;
        margin-bottom: 1.5%;
    }
    
    /* 修改为每行4个 */
    .ad-item {
        width: 23%;
        margin: 0 1% 10px;
        float: left;
    }
    
    .ad-image {
        /* height: 250px; */
        object-fit: cover;
        object-position: center;
    }
}

/* 手机设备响应式 */
@media screen and (max-width: 767px) {
    .main-content {
        margin-top: 60px;
    }
    
    .container, .index-content {
        padding: 10px;
    }
    
    .left-section,
    .right-section {
        float: none;
        width: 100%;
    }
    
    .right-section {
        height: auto;
    }
    
    .promo-section,
    .news-section,
    .bottom-banner {
        height: auto;
        margin-bottom: 15px;
        width: 100%;
        /* float: none; */
    }
    
    /* 优化bottom-banner样式，使其更美观并与其他元素对齐 */
    .bottom-banner {
        margin-top: 20px;
        /* border-radius: 8px; */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    
    .services-list {
        display: flex;
        flex-wrap: wrap;
    }
    
    .service-item {
        flex: 0 1 30%; /* 每行3个，不放大只缩小 */
        border-bottom: 1px solid gray;
        border-right: none;
        height: auto;
        padding: 10px 0;
        margin-right: 1.5%;
        margin-bottom: 1.5%;
    }
    
    .news-header,
    .news-item {
        padding: 3% 5%;
    }
    
    .ad-items {
        height: auto;
        margin: 20px 0;
    }
    
    /* 修改为每行4个 */
    .ad-item {
        width: 23%;
        margin: 0 1% 10px;
        float: left;
    }
    
    .ad-image {
        /* height: 200px; */
        object-fit: cover;
        object-position: center;
    }
    
    .footer-links {
        height: auto;
        padding: 15px 0;
        line-height: normal;
    }
    
    .footer-links ul {
        flex-direction: column;
        align-items: center;
    }
    
    .footer-links ul li {
        margin: 5px 0;
        padding-bottom: 5px;
        border-bottom: 1px solid #666;
        width: 80%;
        font-size: 14px;
    }
    
    .footer-links ul li:last-child {
        border-bottom: none;
    }
    
    .footer-copyright {
        padding: 15px 0 10px;
    }
    
    .footer-copyright p {
        font-size: 11px;
        line-height: 1.5;
    }
    
    .footer-copyright a {
        display: block;
        margin: 5px 0;
    }
}

/* 超小屏幕设备 */
@media screen and (max-width: 480px) {
    .service-item {
        flex: 0 1 48%; /* 每行2个，不放大只缩小 */
        border-bottom: 1px solid gray;
        border-right: none;
        margin-right: 1%;
    }
    
    /* 即使在超小屏幕上也保持每行4个 */
    .ad-item {
        width: 23%;
        margin: 0 1% 10px;
    }
    
    .ad-image {
        /* height: 180px; */
        object-fit: cover;
        object-position: center;
    }
    
    /* 在超小屏幕上优化bottom-banner样式 */
    .bottom-banner {
        margin-top: 15px;
        /* border-radius: 6px; */
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* .news-section {
        padding: 15px;
    } */
    
    .news-header,
    .news-item {
        padding: 2% 3%;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    

}