webs/hanJing/css/mainBusiness.css

.topBanner{
    width: 100%;
    height: 68vh;   
    background-color: #030045;
    display: flex;
    justify-content: center;
    align-items: start;
    /* background: palegoldenrod; */
    overflow: hidden;
    background-image: url(../imgs/main/mainbusiness.png);
    background-repeat: no-repeat;
    background-size:55vw auto;
    background-position:40vw -1vw;  
    position: relative;
}

.topBannerLeft{
    width: 24%;
    height: 80%;
    /* background: #00316B; */
    color: #fff;
    position: absolute;
    top: 10vh;
    left: 18vw;
}

.topBannerLeft p:nth-child(1){
   font-size: 2.4vw;
   font-weight: 600;
   letter-spacing: 0.5vw;
   text-align: justify;
}

.topBannerLeft p:nth-child(2){
    font-size: 1.1vw; 
    color: #01A0D0;
    margin-top: 10px;
    line-height: 4.2vh;
    text-align: justify;
  
}


.btLeft{
    width: 20vw;
    position: absolute;
    bottom: 15vh;
    left: -5.5vw;
}
.tpRight{
    width: 17vw; 
    position: absolute;
    top: 10vh;
    right: -6vw;
}
.btRight{
    width:70vw;
    position: absolute;
    bottom: -1.3vh;
    right: 0vw;
}



.top3{
    width: 20vw;
    position: absolute;
    top: 0vh;
    left: 20vw;  
}
/* ------------------ */

.banner{
    width: 100%;
    height: 255vh;
    background-image: url(../imgs/svg/背景纹（大）.svg);
    background-repeat: no-repeat;
    background-size:160%;
    background-position: 54vw -42vw;  
    background-color: #00316B;
}

 .bannertop{
    width: 100%;
    height:115vh;
    background-image: url(../imgs/main/content.svg);
    background-repeat: no-repeat;
    background-size:40vw;
    background-position:0vw 50%;  
    
   display: flex;
   align-items: center;
   justify-content: end;
   padding-right: 5vw;
   /* padding-top: 18vh; */
    
 }
 
 .bannerArrow{
    height:100%;
    width: auto;
   
}
 .textBox{
    width: 50vw;
    height: 100%;
   color: #fff;
   /* background: peru; */
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   background-image: url(../imgs/main/arrow.png);
   background-repeat: no-repeat;
   background-size:4vw 110%;
   background-position:0vw 50%;  
   padding-top: 10vh;
 }

 /* 手风琴容器 */
.accordion {
    width: 100%;
    max-width: 40vw;
    margin: 0 auto;
   
}

/* 手风琴项目 */
.accordion-item {
    /* border: 1px solid #e0e0e0; */
    margin-bottom: 3vh;
    border-radius: 8px;
    overflow: hidden;
    /* background: #fff; */
    transition: all 0.3s ease;
}

/* 手风琴标题 */
.accordion-header {
    padding: 20px;
    /* background: #f8f8f8; */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
    color: #fff;
  
}

/* .accordion-header:hover {
    background: #009FD0;
} */

/* 标题文字 */
.accordion-header h3 {
    margin: 0;

    color: #fff;
    font-size: 1.8vw;
   
}
.accordion-header h3:hover {
    margin: 0;
    font-size: 1.9vw;
    color: #00E0E4;
    /* 00E0E4 */
}

/* 展开/收起图标 */
.accordion-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
}

/* 内容区域 */
.accordion-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-size: 1vw;
}

/* 激活状态 */
.accordion-item.active .accordion-content {
    padding: 20px;
    max-height: 500px; /* 根据实际内容调整 */
    /* background-color: #009FD0; */
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

/* 添加激活状态的标题样式 */
.accordion-item.active .accordion-header h3 {
    color: #00E0E4;
    font-size: 1.9vw;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .accordion-header {
        padding: 15px;
    }
    
    .accordion-header h3 {
        font-size: 16px;
    }
    
    .accordion-content {
        padding: 15px;
    }
}

/* 添加到现有CSS中 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accordion-item.active .accordion-content {
    animation: slideDown 0.3s ease forwards;
}



.bannerBottom{
    width: 100%;
    height: 150vh;
    background-image: url(../imgs/main/advantage.svg);
    background-repeat: no-repeat;
   background-size:42vw  30vw;
   background-position:50% 55%;  
    background-color: rgba(3, 0, 69, 0.8);
    padding: 10vh 0;
}

.bannerBottomList{
    width: 58vw;
    height: 100%;
    display: flex;  
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

.bannerBottomList li{
    list-style: none;
    width: 20vw;
    height: 25vw;
    /* background: palegoldenrod; */
    margin-top: 8vh;
    border-radius: 8px;
    background: #00316B;
    color: #fff;
    text-align: center;
    padding: 20px;
    padding-top: 6vh;
}
.ListImg{
    width: 6vw;
}
.list p:nth-of-type(1){
    font-size: 1.2vw;
    font-weight: 600;
    margin-top: 2vh;
}
.list p:nth-of-type(2){
    width: 80%;
    font-size: 1vw;
 
    color: #009ECF;
    text-align: left;
    margin: 0 auto;
    margin-top: 2vh;
    text-align: justify;
}



/* ----------------- */

/* 英文状态下样式 */
.topBannerLeft.en{
    width: 34%;
}
.topBannerLeftTitle p:nth-child(1).en
 {
    font-size: 1.8vw; 
  font-weight: 600;
  letter-spacing: normal; 
  text-align: left;
    
   
}

.topBannerLeftTitle p:nth-child(2).en{
    font-size: 1.1vw;
    letter-spacing: normal;
    text-align: left;
    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;

   
}

/* 英文状态下样式 */
.bannerBottomList li.en {
    font-size: 1.1vw;
   
    letter-spacing: normal; /* 英文去除字间距 */
 
    /* 其它英文专属样式 */
}

.bannerBottomList li.en p:nth-child(3) {
    font-size: 0.9vw;
  
    letter-spacing: normal; /* 英文去除字间距 */
    width: 100%;
    line-height: 1.7;
    text-align: left;
    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
}