/* 公司介绍页 */
.page2 {
    height: 34.375rem; /* 550px → 34.375rem */
    /* background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1952&q=80'); */
    background-color: #ffffff;
    /* background: linear-gradient(rgba(12, 35, 64, 0.8), rgba(12, 35, 64, 0.6)); */
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-card {
    position: absolute;
    padding-top: 12%;
    border-radius: 1.25rem; /* 20px → 1.25rem */
    width: 45.625rem; /* 730px → 45.625rem */
    height: 21.875rem; /* 350px → 21.875rem */
    text-align: left;
    margin-right: 36%;
    margin-top: -15%;
}
.about-card-1{
    position: absolute;
    margin-top: -4.375rem; /* -70px → -4.375rem */
    color: #315daf;
}
.about-card-2{
    position: absolute;
    margin-top: -1.0625rem; /* -17px → -1.0625rem */
    margin-left: 2.8125rem; /* 45px → 2.8125rem */
    color: #000000;
    
}
.about-card-3{
    position: absolute;
    max-width: 95%;
    margin-top: 3.125rem; /* 50px → 3.125rem */
    margin-left: -4.375rem; /* -70px → -4.375rem */
    color: #000000;
    line-height: 1.5;
    font-size: 1.125rem; /* 18px → 1.125rem */
    text-align: justify;
}

.cta-button {
    position: absolute;
    display: inline-block;
    margin-top: 16.375rem; /* 230px → 14.375rem */
    margin-left: 9.375rem; /* 150px → 9.375rem */
    padding: 0.75rem 1.875rem; /* 12px 30px → 0.75rem 1.875rem */
    background: #007bff;
    color: white;
    border-radius: 1.5625rem; /* 25px → 1.5625rem */
    text-decoration: none;
    transition: 0.3s;
}


/* 响应式设计 */
@media (max-width: 768px) {
    .navbar {
        padding: 0.9375rem 1.25rem; /* 15px 20px → 0.9375rem 1.25rem */
    }
    
    .nav-links {
        display: none;
    }
}


/* 轮播容器样式 */
.my-carousel {
    position: absolute;
    width: 46.875rem; /* 750px → 46.875rem */
    height: 40%;
    left: 52%;
    margin-left: -1.875rem; /* -30px → -1.875rem */
    overflow: hidden;
    border-radius: 0.5rem; /* 8px → 0.5rem */
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15); /* 4px 12px → 0.25rem 0.75rem */
}

/* 轮播轨道 */
.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

/* 单个轮播项 */
.carousel-item {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.progress-bars {
    position: absolute;
    bottom: 1.25rem; /* 20px → 1.25rem */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem; /* 8px → 0.5rem */
    width: 30%;
}

/* 单个进度条 */
/* .progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

/* 进度条填充动画 */
.progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #fff;
    transition: width 4s linear; /* 与自动播放时间同步 */
}

/* 激活状态的进度条 */
.progress-bar.active .progress-fill {
    width: 100%;
} */

/* 控制按钮 */
/* .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.3);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
} */

.carousel-btn:hover {
    background: rgba(0,0,0,0.7);
}

.prev-btn { left: 1.25rem; } /* 20px → 1.25rem */
.next-btn { right: 1.25rem; } /* 20px → 1.25rem */

/* 指示器小圆点 */
.indicators {
    position: absolute;
    bottom: 1.25rem; /* 20px → 1.25rem */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.625rem; /* 10px → 0.625rem */
}

.indicator {
    width: 0.75rem; /* 12px → 0.75rem */
    height: 0.75rem; /* 12px → 0.75rem */
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s;
}

.indicator.active {
    background: white;
    transform: scale(1.2);
}

/* 手机端 */
@media (max-width: 576px) {
  .box { width: 100%; }
}

/* 平板 */
@media (min-width: 577px) and (max-width: 992px) {
  .box { width: 50%; }
}

/* 桌面端 */
@media (min-width: 993px) {
  .box { width: 25%; }
}