/* 首页卡片轮播图 */
.jd-swiper-con {
    position: relative;
    width: 100%;
    height: 1100px;
    background: #00d5ff;
    padding-top: 60px;

}

.jd-swiper-con-h1 {
    text-align: center;
    font-size: 40px;
}

.jd-swiper-con-p {
    text-align: center;
}
.conn {
    width: 100%;
    height: 50%;
}

.jd-swiper-pagi {
    width: 100%;
    height: 30px;
    border-top: 3px solid #3498db;  /* 上边框：3像素宽，实线，蓝色 */
    margin-top: 80px; /* 添加20px的上边距 */
}

.jd-swiper-pagination {
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10
}

.swiper {
    width: 100%;
    height: 100%;
    margin: 70px 0px 70px 0px; /* 上 右 下 左 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    color: #3d46f8;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #ffffff30;
    position: relative;
    transition: 300ms;
    transform: scale(0.8) !important;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
}

.card { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.card-top { position: relative; flex: 1 0 80%; overflow: hidden; }
.card-top img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; flex: 1 0 20%; padding: 0px 24px; background: rgba(255,255,255,0.16); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.35); color: #fff; }
.info-left { display: flex; align-items: center; gap: 12px; }
.info-icon { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex-shrink: 0; }
.info-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.info-text { line-height: 1.2; }
.info-title { font-size: 20px; font-weight: 600; }
.info-desc { margin-top: 4px; font-size: 14px; opacity: .85; }
.info-btn { color: #fff; text-decoration: none; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35); border-radius: 12px; padding: 12px 18px; display: inline-flex; align-items: center; gap: 8px; }

/* 关键修改：选中卡片恢复原始大小 */
.swiper-slide-active {
    transform: scale(1.0) !important;
}

.swiper-pagination-bullet {
    height: 80px;
    width: 80px;
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 20px) !important;
    border-radius: var(--swiper-pagination-bullet-border-radius,10%);
    margin-top: 80px !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255,255,255,0.35);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .8);
}

/* 鼠标悬停效果 */
.swiper-pagination-bullet:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
    opacity: 0.8;
}

/* 点击动画效果 */
.swiper-pagination-bullet:active {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.swiper-pagination-bullet-active {
    transform: scale(1.3);
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 0;
}
.swiper-pagination-bullet-active:hover {
    transform: scale(1.4);
}

/* 为每个导航点设置图片（纯 CSS，无 JS） */
.jd-swiper-pagination .swiper-pagination-bullet:nth-child(1) { background: url('../demo/images/nature-1.jpg') center/cover no-repeat !important; }
.jd-swiper-pagination .swiper-pagination-bullet:nth-child(2) { background: url('../demo/images/nature-2.jpg') center/cover no-repeat !important; }
.jd-swiper-pagination .swiper-pagination-bullet:nth-child(3) { background: url('../demo/images/nature-3.jpg') center/cover no-repeat !important; }
.jd-swiper-pagination .swiper-pagination-bullet:nth-child(4) { background: url('../demo/images/nature-4.jpg') center/cover no-repeat !important; }
.jd-swiper-pagination .swiper-pagination-bullet:nth-child(5) { background: url('../demo/images/nature-5.jpg') center/cover no-repeat !important; }
.jd-swiper-pagination .swiper-pagination-bullet:nth-child(6) { background: url('../demo/images/nature-6.jpg') center/cover no-repeat !important; }
.jd-swiper-pagination .swiper-pagination-bullet:nth-child(7) { background: url('../demo/images/nature-7.jpg') center/cover no-repeat !important; }
.jd-swiper-pagination .swiper-pagination-bullet:nth-child(8) { background: url('../demo/images/nature-8.jpg') center/cover no-repeat !important; }
.jd-swiper-pagination .swiper-pagination-bullet:nth-child(9) { background: url('../demo/images/nature-9.jpg') center/cover no-repeat !important; }