.banner{
  width: 100%; height: 500px; background: url('../img/about/banner.png') no-repeat center center; background-size: cover;
}
.banner-m{
  display: none;
}

/* 简介 */
.introduction{
  display: flex; justify-content: space-between; flex-wrap: wrap;
}
.introduction-img{
  display: block; width: 50%; flex-shrink: 0;
}
.introduction-detail{
  flex: 1; margin-right: 20px;
}
.introduction-detail h3{
  font-size: 24px; color: #444; font-weight: bold; background: url('../img/about/about-icon.png') no-repeat left center; background-size: auto 100%; padding-left: 35px; margin-bottom: 20px;
}
.introduction-detail ul li{
  font-size: 17px; line-height: 1.7; color: #444; margin-bottom: 10px;
}
.introduction-detail ul li:last-child{
  margin-bottom: 0;
}

/* 文化 */
.culture{
  width: 100%;
}
.culture-title{
  width: 100%; height: 300px; padding: 100px 0; background: url('../../img/about_us_culture_bg.jpg') no-repeat center top; background-size: cover; background-attachment: fixed;
}
.culture .title,
.culture .sub-title{
  color: #fff;
}
.culture-container{
  margin-top: -70px; background: #fff; box-sizing: border-box; border-radius: 10px; padding: 30px; box-shadow: 0 2px 10px rgba(150,150,150,.2);
}
.culture-detail{
  display: flex; justify-content: space-between; flex-wrap: wrap;
}
.culture-img{
  display: block; width: 55%; flex-shrink: 0;
}
.culture-list{
  flex: 1; margin-left: 70px;
}
.culture-list li{
  display: flex; justify-content: flex-start; align-items: center; border-bottom: 1px solid #f1f1f1; padding: 25px 0;
}
.culture-list li:last-child{
  border-bottom: none;
}
.culture-list li img{
  display: block; width: auto; height: 40px;
}
.culture-icon{
  width: 50px; height: 50px; flex-shrink: 0; border-radius: 50px; position: relative; background: #f5f5f5;
}
.culture-icon1::before,
.culture-icon2::before,
.culture-icon3::before,
.culture-icon4::before,
.culture-icon5::before
{
  content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 0; z-index: 1; transition: 0.5s;
}
.culture-icon1::before{
  background: url('../img/about/culture-icon1.png') no-repeat center center; background-size: 60% auto;
}
.culture-icon2::before{
  background: url('../img/about/culture-icon2.png') no-repeat center center; background-size: 60% auto;
}
.culture-icon3::before{
  background: url('../img/about/culture-icon3.png') no-repeat center center; background-size: 60% auto;
}
.culture-icon4::before{
  background: url('../img/about/culture-icon4.png') no-repeat center center; background-size: 60% auto;
}
.culture-icon5::before{
  background: url('../img/about/culture-icon5.png') no-repeat center center;
}
.culture-icon::after{
  content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: #70CFE2; background: linear-gradient(to right, #46aef7, #1dd5e6); position: absolute; left: 0; top: 0; z-index: 0; transform: scale(0);
}
.culture-list dl{
  flex: 1; margin-left: 30px;
}
.culture-list dt{
  font-size: 24px; color: #444; line-height: 1; font-weight: bold; transition: 0.3s;
}
.culture-list dd{
  font-size: 16px; color: #909090; line-height: 1; margin-top: 15px;
}
.culture-list li.hoverCulture .culture-icon::before{
  transform: rotateY(360deg);
}
.culture-list li.hoverCulture .culture-icon1::before{
  background: url('../img/about/culture-icon1-white.png') no-repeat center center; background-size: 60% auto;
}
.culture-list li.hoverCulture .culture-icon2::before{
  background: url('../img/about/culture-icon2-white.png') no-repeat center center; background-size: 60% auto;
}
.culture-list li.hoverCulture .culture-icon3::before{
  background: url('../img/about/culture-icon3-white.png') no-repeat center center; background-size: 60% auto;
}
.culture-list li.hoverCulture .culture-icon4::before{
  background: url('../img/about/culture-icon4-white.png') no-repeat center center; background-size: 60% auto;
}

.culture-list li.hoverCulture .culture-icon5::before{
  background: url('../img/about/culture-icon5-white.png') no-repeat center center;
}

.culture-list li.hoverCulture .culture-icon::after{
  animation: scaleIcon 0.3s; animation-fill-mode: forwards;
}
.culture-list li.hoverCulture dt{
  color: #22A3BD;
}
@keyframes scaleIcon {
  0% {
    transform: scale(0)
  }
  70% {
    transform: scale(1.2)
  }
  100% {
    transform: scale(1)
  }
}

/* 实力展示 */
.strength-container{
  width: 100%; background: url('../../img/about_us_strength_bg.png') no-repeat center center; background-size: cover;
}
.strengthSwiper{
  padding-bottom: 40px;
}
.strengthSwiper .swiper-pagination{
  bottom: 0;
}
.strengthSwiper .swiper-pagination-bullet{
  width: 25px; border-radius: 8px; transition: 0.2s; background: #46aef7;
}
.strengthSwiper .swiper-pagination-bullet-active{
  background: #22A3BD; background: linear-gradient(to right, #46aef7, #1dd5e6); width: 35px;
}
.strength-item{
  width: 88%; box-sizing: border-box; margin: 0 auto; background: #fff; box-sizing: border-box; padding: 24px; border-radius: 10px; position: relative;
}
.strength-item img{
  display: block; width: 100%;
}
.strength-item p{
  font-size: 16px; margin-bottom: 0; line-height: 1.2; margin-top: 16px; text-align: center;
}

/* 团队风采 */
.team{
  display: flex; justify-content: space-between; flex-wrap: wrap;
}
.team li{
  width: 32.5%; margin-bottom: 17px;
}
.team li:nth-of-type(4),
.team li:nth-of-type(5),
.team li:last-child{
  margin-bottom: 0;
}
.team img{
  display: block; width: 100%;
}

/* 联系我们 contact */
.contact{
  display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;
}
.contact-wrapper{
  width: 47%; background: #22A3BD; padding: 40px 30px; box-sizing: border-box; background: url('../../img/about_us_culture_bg.jpg') no-repeat center center; background-size: cover;
}
.contact-wrapper h3{
  font-size: 20px; font-weight: bold; color: #fff; display: flex; justify-content: space-between; align-items: flex-end; background: url('../../img/about_us_contact_ic1.png') no-repeat left center; background-size: auto 100%; padding-left: 25px; margin-bottom: 40px;
}
.contact-wrapper h3 span{
  font-size: 15px; color: #fff; font-weight: normal;
}
.contact-wrapper ul{
  display: flex; justify-content: space-between;
}
.contact-wrapper ul li{
  width: 30%; text-align: center;
}
.contact-wrapper ul img{
  display: block; margin: 0 auto; width: 74%;
}
.contact-wrapper ul p{
  background: #fff; border-radius: 6px 0 6px 0; text-align: center; width: 68%; height: 40px; line-height: 40px; font-size: 18px; font-weight: bold; margin: 30px auto; color: #22A3BD; position: relative;
}
.contact-wrapper ul p::after{
  display: block; content: ''; width: 94%; height: 34px; border: 2px solid #22A3BD; border-radius: 6px 0 6px 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.contact-wrapper ul a{
  text-decoration: none; color: #fff; font-size: 18px;
}
.map{
  flex: 1;
}
.map img{
  display: block; width: 100%;
}

/* 横向双层发展历程时间轴（内容块宽度固定，主轴自适应） */
.development{
  background: url("../img/about/dev-bg.jpg") no-repeat center center/cover;
  margin-top:86px;
}
.development .title,
.development .sub-title{
  color: #fff;
}

.timeline-wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 200px 0;
}

.timeline-line-main {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-milestones {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 2;
}

.milestone-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: calc(100% / 7);
    text-align: center;
    transition: all 0.3s ease;
}

.milestone-dot {
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.milestone-connector {
    width: 2px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    transition: background-color 0.3s ease;
}

.milestone-item:hover .milestone-dot {
    background-color: #2513d1;
    border-color: #2513d1;
}

.milestone-item:hover .milestone-connector {
    background-color: #2513d1;
}

.milestone-item:hover .milestone-icon {
    background-color: #2513d1;
}

.milestone-item.special:hover .milestone-dot {
    background-color: #2513d1;
    border-color: #2513d1;
}

.milestone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

.milestone-up .milestone-connector {
    height: 75px;
    bottom: 50%;
    margin-bottom: 6px;
    z-index: 2;
}

.milestone-down .milestone-connector {
    height: 75px;
    top: 50%;
    margin-top: 6px;
    z-index: 2;
}

.milestone-item.text-2lines .milestone-connector {
    height: 95px;
}

.milestone-item.text-3lines .milestone-connector {
    height: 115px;
}

.milestone-up .milestone-content {
    order: 1;
    position: absolute;
    bottom: calc(50% + 75px);
    left: 50%;
    transform: translateX(-50%);
}

.milestone-down .milestone-content {
    order: 2;
    position: absolute;
    top: calc(50% + 75px);
    left: 50%;
    transform: translateX(-50%);
}

.milestone-item.text-2lines.milestone-up .milestone-content {
    bottom: calc(50% + 95px);
}

.milestone-item.text-2lines.milestone-down .milestone-content {
    top: calc(50% + 95px);
}

.milestone-item.text-3lines.milestone-up .milestone-content {
    bottom: calc(50% + 115px);
}

.milestone-item.text-3lines.milestone-down .milestone-content {
    top: calc(50% + 115px);
}

.milestone-up .milestone-year-desc-group {
    position: absolute;
    left: calc(50% + 30px);
    bottom: calc(50% + 37px);
    transform: translateY(50%);
    align-items: flex-start;
    text-align: left;
    min-width: 170px;
}

.milestone-down .milestone-year-desc-group {
    position: absolute;
    left: calc(50% + 30px);
    top: calc(50% + 47px);
    transform: translateY(-50%);
    align-items: flex-start;
    text-align: left;
    min-width: 170px;
}

.milestone-item.text-2lines.milestone-up .milestone-year-desc-group {
    bottom: calc(50% + 47px);
}

.milestone-item.text-2lines.milestone-down .milestone-year-desc-group {
    top: calc(50% + 57px);
}

.milestone-item.text-3lines.milestone-up .milestone-year-desc-group {
    bottom: calc(50% + 57px);
}

.milestone-item.text-3lines.milestone-down .milestone-year-desc-group {
    top: calc(50% + 67px);
}

.milestone-item:nth-child(6) .milestone-year-desc-group {
    top: calc(50% + 52px);
}

.milestone-icon {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
    position: relative;
    overflow: visible;
    transition: background-color 0.3s ease;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
    z-index: 5;
}

.milestone-icon:hover {
    background-color: #2513d1;
}

.milestone-icon img {
    max-width: 100%;
    max-height: 100%;
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.milestone-icon .normal-icon {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.milestone-icon .hover-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}


.milestone-item:hover .milestone-icon .normal-icon {
    opacity: 0;
}

.milestone-item:hover .milestone-icon .hover-icon {
    opacity: 1;
}

.milestone-down .milestone-icon {
    margin-top: 10px; 
    margin-bottom: 0;
}

.milestone-year-desc-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.milestone-year {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
}

.milestone-description {
    font-size: 0.85rem;
    color: #fff;
    line-height: 1.4;
    max-width: 150px; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
    max-height: calc(0.85rem * 1.4 * 3 + 4px);
}

.milestone-item {
    position: relative;
    transition: all 0.3s ease;
}

@media (max-width: 1440px) {
  .banner{
    height: 520px;
  }
  .culture-list li{
    padding: 17px 0;
  }
  .strength-item{
    padding: 15px;
  }
  .strength-item p{
    font-size: 14px;
  }
  .contact-wrapper ul img{
    width: 70%;
  }
}
@media (max-width: 1024px) {
    .banner {
        height: 330px;
    }

    .introduction-img {
        width: 100%;
        margin-top: 20px;
    }

    .culture-title {
        padding: 60px 0;
        height: 240px;
    }

    .culture-container {
        padding: 20px;
    }

    .culture-list {
        margin-left: 30px;
    }

    .culture-img {
        width: 65%;
    }

    .culture-list li {
        padding: 12px 0;
    }

    .culture-icon {
        width: 40px;
        height: 40px;
    }

    .culture-list dl {
        margin-left: 15px;
    }

    .culture-list dt {
        font-size: 18px;
    }

    .culture-list dd {
        font-size: 14px;
        line-height: 1.3;
        margin-top: 5px;
    }

    .strength-item p {
        font-size: 18px;
    }

    .contact-wrapper {
        width: 100%;
    }

    .map {
        flex: auto;
        width: 100%;
        margin-top: 20px;
    }

    .milestone-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .milestone-year {
        font-size: 16px;
    }

    .milestone-description {
        font-size: 14px;
        max-width: 120px;
    }

    .milestone-up .milestone-connector, .milestone-down .milestone-connector {
        height: 40px;
    }

    .milestone-up .milestone-content {
        bottom: calc(50% + 40px + 10px);
    }

    .milestone-down .milestone-content {
        top: calc(50% + 40px + 10px);
    }
}
@media (max-width: 767px) {
  .banner{
    height: auto; background: none;
  }
  .banner-m{
    display: block; width: 100%;
  }
  .introduction{
    align-items: flex-start;
  }
  .introduction-detail{
    margin-right: 0;
  }
  .introduction-detail h3{
    font-size: .32rem; padding-left: .5rem; margin-bottom: .2rem;
  }
  .introduction-detail ul li{
    font-size: .28rem; margin-bottom: .13rem;
  }
  .introduction-img{
    margin-top: .2rem;
  }
  .culture-title{
    padding: .8rem 0; height: 3.8rem;
  }
  .culture-container{
    padding: .3rem; border-radius: .15rem;
  }
  .culture-detail{
    align-items: flex-start;
  }
  .culture-img{
    width: 100%;
  }
  .culture-list{
    margin-left: 0; margin-top: .2rem;
  }
  .culture-list li{
    padding: .24rem 0;
  }
  .culture-icon{
    width: .8rem; height: .8rem;
  }
  .culture-list dl{
    margin-left: .3rem;
  }
  .culture-list dt{
    font-size: .36rem;
  }
  .culture-list dd{
    font-size: .28rem; margin-top: .15rem;
  }
  .strengthSwiper{
    padding-bottom: .7rem;
  }
  .strengthSwiper .swiper-pagination-bullet{
    width: .4rem; height: .14rem;
  }
  .strength-item{
    padding: .2rem; border-radius: .1rem; width: 95%;
  }
  .strength-item p{
    font-size: .26rem; line-height: 1.3; height: .6rem; margin-top: .18rem;
  }
  .team li{
    width: 48%; margin-bottom: .34rem;
  }
  .contact-wrapper{
    padding: .4rem .3rem;
  }
  .contact-wrapper h3{
    flex-wrap: wrap; font-size: .32rem; padding-left: .75rem; margin-bottom: .4rem;
  }
  .contact-wrapper h3 span{
    width: 100%; font-size: .26rem; margin-top: .1rem;
  }
  .contact-wrapper ul li{
    width: 33.33%;
  }
  .contact-wrapper ul p{
    margin: .2rem auto; height: auto; line-height: 1; background: transparent; color: #fff; font-size: .32rem
  }
  .contact-wrapper ul p::after{
    display: none;
  }
  .contact-wrapper ul a{
    font-size: .26rem; display: block;
  }
  .timeline-milestones {
        flex-direction: column;
        align-items: flex-start; 
        width: 100%;
    }
    .timeline-line-main {
        left: 30px; 
        top: 0;
        width: 2px;
        height: 100%;
        transform: none;
    }
    .milestone-item {
        width: 100%;
        flex-direction: row;
        margin-bottom: 40px;
        text-align: left;
        min-height: 80px;
    }
    .milestone-dot {
        position: absolute;
        top: 50%;
        left: 30px;
        transform: translate(-50%, -50%);
        margin-right: 0;
        align-self: auto;
        margin-top: 0;
    }
    .milestone-connector {
        display: none;
    }
    .milestone-content {
        margin-left: 60px;
        width: calc(100% - 60px);
    }
    .milestone-year-desc-group {
        position: static !important;
        margin-left: 60px;
        transform: none !important;
        text-align: left;
        align-items: flex-start;
        width: auto;
        top: auto !important;
        bottom: auto !important;
    }
    .milestone-up .milestone-year-desc-group,
    .milestone-down .milestone-year-desc-group {
        position: static;
        left: auto;
        top: auto;
        transform: none;
    }
    .milestone-up .milestone-content, .milestone-down .milestone-content {
        position: relative;
        bottom: auto; top: auto;
        left: auto; transform: none;
        align-items: flex-start;
        padding: 0;
    }
    .milestone-up .milestone-icon, .milestone-down .milestone-icon{
        margin-bottom: 8px;
        margin-top: 0;
    }
    .milestone-description {
        max-width: none;
        width: calc(100% - 60px);
        max-height: calc(0.7rem * 1.4 * 3 + 4px);
        -webkit-line-clamp: 3;
    }
}