.carousel-caption span{
    display: block;
}
carousel-control-next, .carousel-control-prev {
    width: 5%;
}
.title1,.title_content p:nth-child(1){
width: 62rem;
height: 3.2rem;
font-family: Roboto;
    /*font-family: Plus Jakarta Sans;*/
    font-weight: bold;
   font-size: 4rem;
    color: #010101;
     display: flex !important;
}
.banner3 .title_content p:nth-child(1){
    width: 49rem;
    height: auto;
}
.title2,.title_content p:nth-child(2){
font-family: Roboto;
/*font-family: Plus Jakarta Sans;*/
font-weight: 400;
font-size: 3rem;
color: #000000;
margin-top: 3.9rem;
 display: flex !important;
}
.title3,.title_content p:nth-child(3){
font-family: Roboto;
/*font-family: Plus Jakarta Sans;*/
font-weight: 400;
font-size: 2.4rem;
color: #000000;
margin-top: 6rem;
 display: block;
}
.title4{
    margin-top: 4.15vw;
    display: block;
}
.title1 span{
    display: inline-block !important;
}
.carousel-caption {
    position: absolute;
    right: auto;
    top: 14.9rem;
    left: 13.55vw;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
  
    height: 600px;
    text-align: left;
}
.title4 a{
   font-family: Roboto;
/*font-family: Plus Jakarta Sans;*/
font-weight: Medium;
font-size: 2.14rem;
color: #F7931E !important;
cursor: pointer;

}
.title4 a:hover{
    text-decoration-line: underline;
}
.title4{
    display: flex !important;
    gap: 3.3vw;
}
.orange{
    color: #F7931E;

}
.carousel-control-next, .carousel-control-prev{
    width: 5%;
}


.banner2 .title2{
font-family: Roboto;
/*font-family: Plus Jakarta Sans;*/
font-weight: 400;
font-size: 30px;
color: #000000;
}

.banner2 .title3{
font-family: Roboto;
/*font-family: Plus Jakarta Sans;*/
font-weight: 400;
font-size: 0.9999vw;
color: #000000;
}

.banner3 .title1{
       width: 27.3vw;
    height: 5.3vw;font-family: Roboto;
/*font-family: Plus Jakarta Sans;*/
font-weight: bold;
font-size: 2.1vw;
color: #010101;
}

.banner3 .title3{
       width: 29.8vw;
    height: 1vw;
font-family: Roboto;
/*font-family: Plus Jakarta Sans;*/
font-weight: 400;
font-size: 1.25vw;
color: #000000;
margin-top: 3.7vw;
}

.nav-pills{
    border-bottom: 1px solid #E5E5E5;
}
.nav-pills a{
 
font-family: Roboto;

font-size: 2.4rem;
color: #000;
}

.nav-pills .active {
    background-color: transparent !important;
    color: #F7931E !important;
   
    font-weight: bold;
}
.nav-pills .active span{
     border-bottom: 1px solid #F7931E !important;
     padding-bottom: 0.58rem;
}


.otl-title{
height: 2.1rem;
font-family: Roboto;
font-weight: bold;
font-size: 2.2rem;
color: #010101;
    position: absolute;
    display: block;
    top: 10rem;
    right: 9.9rem;    width: 37.8rem;
    text-align: center;
    line-height: 1;
}

.otel-title1{
height: 3.9rem;
font-family: Roboto;
font-weight: 400;
font-size: 1.4rem;
color: #010101;
    position: absolute;
    top: 15.6rem;
    right: 15rem;
    text-align: center;    width: 26.7rem;
}

.feature{
    width: 191.8rem;
height: 113rem;
background: #F8F9FA;
}

.feature .feature-title{
    font-family: Roboto;
    font-weight: bold;
    font-size: 4.8rem;
    color: #010101;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-bottom: 6.2rem;
    padding-top: 12.1rem;
    line-height: 1;
}
.feature-grid{
    gap: 3.1rem;
    display: flex;
    justify-content: center;
    align-content: center;
}

.feature-grid-item{
    width: 32.64rem;
height: 35rem;
background: #FFFFFF;
}

.feature .custom-card{
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
        width: 32.64rem;
    height: 35rem;
}

.feature .custom-card img{
    /*width: 13.6rem;*/
    height: 14.5rem;
      transition: transform 0.3s ease; /* 平滑动画 */
cursor: pointer;
    margin-bottom: 4.7rem;
}
.feature #tab2 .feature-grid-item:nth-child(1) img{
    height: 7.5rem;
    margin-top: 7rem;
}

.feature .custom-card img:hover {
  transform: scale(1.06); /* 放大 10% */
}
.feature .custom-card h5{
    width: 5.2rem;
height: 1.3rem;
font-family: Roboto;
font-weight: bold;
font-size: 1.8rem;
color: #010101;
    text-align: center;
    width: 100%;
    display: block;
}

.feature .custom-card p{
        width: 10.2rem;
    height: 1rem;
    font-family: Roboto;
    font-weight: 400;
    font-size: 1.4rem;
    color: #010101;
    margin-top: 2rem;
        text-align: center;
    width: 100%;
    display: block;
}

.feature .carousel-indicators{
        top: 24rem;
    right: -84rem;
}

.feature .carousel-indicators [data-bs-target]{
        width: 1.1rem;
    height: 1.1rem;
   background: #F7931E;
    border-radius: 50%;
    border-radius: 50%;
    border: none !important;
}

.feature .carousel-indicators .active{
    background: #F7931E;
}


.feature .carousel-indicators .two{
    background: #F7931E;
    opacity: 0.6;
}
.feature .carousel-indicators .three{
    background: #F7931E;
    opacity: 0.2;
}
.blog{
        width: 191.8rem;
    height: 83.2rem;
    background: #F8F9FA;
    padding-top: 9.2rem;

}


.blog .blog-top{
        position: relative;
    margin-bottom: 5.9rem;
}



.blog .blog-top  .blog-title{
        font-family: Roboto;
    font-weight: bold;
    font-size: 4.8rem;
    color: #010101;
}

.blog .blog-top  span:nth-child(2){
        width: 6.7rem;
    height: 1.4rem;
    font-family: Roboto;
    font-weight: 400;
    font-size: 2rem;
    color: #010101;
    position: absolute;
    right: 0rem;
    bottom: 0rem;
    cursor: pointer;
    
}
.blog .blog-top  span:nth-child(2):hover{
    color: orange;
}
.blog .blog-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog .blog-bottom .blog-bottom-item{
        width: 44.7rem;
    height: 49.7rem;
    background: #FFFFFF;
   
}
.blog .blog-bottom .blog-bottom-item:hover{
     box-shadow: 0rem 0rem 2rem 0rem #DDDDDD;
}


.blog .blog-bottom .blog-bottom-item img{
        width: 44.7rem;
    height: 21.1rem;
    object-fit: cover;
}

.blog .blog-bottom .blog-bottom-item .blog-title{
    font-family: Roboto;
    font-weight: bold;
    font-size: 2rem;
    color: #000;
    margin-top: 4.2rem;
    display: block;
    /* margin: 0 auto; */
    margin-top: 4.2rem;
    padding-left: 1.9rem;
    line-height: 1.1;
}
.blog .blog-bottom .blog-bottom-item .blog-title:hover,.blog .blog-bottom .blog-bottom-item .blog-title:hover{
    color: #F7931E;
}

.blog .blog-bottom .blog-bottom-item .blog-date{
        font-family: Roboto;
    font-weight: 400;
    font-size: 1.4rem;
    color: #7E7E7E;
    display: block;
    margin-top: 3rem;
    padding-left: 1.9rem;
}

.blog .blog-bottom .blog-bottom-item .blog-des{
        font-family: Roboto;
    font-weight: 400;
    font-size: 1.4rem;
    color: #010101;
    display: block;padding-left: 1.9rem;
}

.blog .blog-bottom .blog-bottom-item .blog-line{
        width: 40.8rem;
    height: 0.1rem;
    background: #DCDCDC;
    display: block;
    margin-left: 1.9rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/*.blog-right-list .blog-title{*/
/*    color: #000 !important;*/
/*}*/


.wahts{
       padding-top: 12.6rem;
    background-color: #fff;
    height: 62rem;
  
        width: 191.8rem;
    padding-bottom: 9.6rem;
}


.wahts .container{
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: center;
   
    height: 40rem;
}


.wahts .whats-item{
        width: 32rem;
    height: 40rem;
}

.wahts .title-whtas{
        font-family: Roboto;
    font-weight: bold;
    font-size: 4.5rem;
    color: #010101;
    display: block;
    line-height: 1.2;
    margin-bottom: 66px;


}

.wahts .title1-whtas{
        font-family: Roboto;
    font-weight: 400;
    font-size: 2.4rem;
    color: #010101;
}

.wahts .whats-item img{
    width: 100%;
    height: 100%;
        object-fit: cover;
        cursor: pointer;
         transition: transform 0.3s ease; /* 平滑动画 */

}
.wahts .whats-item img:hover{
    transform: scale(1.05); /* 放大 10% */
}

.category .title{

font-family: Roboto;
font-weight: bold;
font-size: 4.8rem;
color: #010101;
}



.category {
       width: 100%;
  
    margin-top: 9rem;
        margin-bottom: 7.9rem;
}
.category .container{
        display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.category .item-category {
        display: flex;
    width: 140rem;
    height: 100%;
    gap: 20px;
    height: 56.9rem;
}

/* 左侧：1等分 */
.category .left {
    flex: 1;
    background-color: #f5f5f5; 
    position: relative;
    border-radius: 2rem;
}

.category .left  span{
    font-family: Roboto;
    font-weight: bold;
    font-size: 2rem;
    color: #010101;
    position: absolute;
    left: 7.5rem;
    top: 8.1rem;
}

/* 右侧区域：包含上下两部分 */
.category .right {
    flex: 4; /* 因为右边总共占4个等分（1+2+1）上+（1+1+1+1）下 */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 右上区域 */
.category .right-top {
    display: flex;
    flex: 1;
    gap: 20px;
}

.category .right-top-1 {
    flex: 1;
     position: relative;
}


.category .right-top-2 {
    flex: 2;
     position: relative;
}

/* 右下区域 */
.category .right-bottom {
    display: flex;
    flex: 1;
    gap: 20px;
}

.category .right-bottom-1 {
    flex: 1;
     position: relative;
}
.category .right-bottom-1 span,.category .right-top-1 span,.category .right-top-2  span{
    
    font-family: Roboto;
    font-weight: bold;
    font-size: 2rem;
    color: #010101;
    top: 4rem;
     position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}


.category img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    border-radius: 1rem;
}
.category img {
  transition: transform 0.3s ease; /* 平滑动画 */
}

.category img:hover {
  transform: scale(1.02); /* 放大 10% */
}


.message{
    height: 9rem;
    background: #F8F9FA;
}
.message .left{
        display: flex;
    align-items: self-start;
    justify-content: flex-start;
    gap: 3.2rem;

}
.message .left .left_left{
        display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.1rem;
    flex-direction: column;
    margin-top: 2.1rem;
}
.message .left .left_left .blog{
        width: 6rem;
    height: 3rem;
    background: #F7921E;
    border-radius: 0.5rem;
    display: block;
    text-align: center;
    padding: 0;
    line-height: 3rem;
    font-family: Roboto;
    font-weight: bold;
    font-size: 1.8rem;
    color: #FFFFFF;
}
.message .left .left_left .news{
        font-family: Roboto;
    font-weight: bold;
    font-size: 1.8rem;
    color: #000000;
    display: block;

}

.message .left  .left_right{
        display: flex;
    justify-content: flex-start;
    align-items: self-start;
    gap: 1.1rem;
    flex-direction: column;
}

.message .left  .left_right .content{
        font-family: Roboto;
    font-weight: bold;
    font-size: 2rem;
    color: #010101;
    display: block;
}
.message .left  .left_right .content:hover{
    color: orange;
}
.message .left  .left_right .date{
    font-family: Roboto;
    font-weight: 400;
    font-size: 1.4rem;
    color: #010101;
    display: block;
    /*margin-top:1.1rem;*/
}

.message .more{
        font-family: Roboto;
    font-weight: 400;
    font-size: 2rem;
    color: #010101;
}

@media (max-width: 768px) {
    .blog .blog-bottom{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4rem;
    }
    .blog .blog-bottom .blog-bottom-item{
        width: 55rem;
        padding: 2rem;
    }
    .blog .blog-bottom .blog-bottom-item img{
        width: 53.7rem;
    }
    .blog .blog-bottom .blog-bottom-item .blog-title{
        font-size: 2.5rem;
    }
    .blog .blog-bottom .blog-bottom-item .blog-date{
        font-size: 2rem;
    }
    .blog .blog-bottom .blog-bottom-item .blog-des{
        font-size: 2rem;
    }
    .wahts .container{
       
            justify-content: flex-start;
            gap: 9rem;
            align-items: flex-start;
            height: 40rem;
            flex-direction: column;
    }
    .wahts .whats-item{
        width: 57rem;
    }
    .wahts{
        height: 273rem;
    }
    .feature-grid {
        gap: 2.1rem;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
    }
    .feature-grid-item{
        width: 28rem;
    }
}   

