/* 整体滚动条容器 */

body{
      background:#f5f8ff;
}

.open-banner{
    width:100%;
    
    background:url(imgs/open_bannerbg.jpg) top center repeat-x;
   

}

.open-banner .open-banner-bg{
    width:100%;
    height:auto;
   
}


.open-banner .banner_bg{
    width: 100%;
    min-height:50rem;
    background:url(imgs/open_bannerbg.jpg) top center no-repeat;
    
}

.open-banner .open-banner_content{
    position:relative;
    height: 500px;
}


.open-banner .open-banner_content2{
    position:absolute;
    top:45%;
    left:50%;
    transform: translateX(-50%);
    width: 120rem;
}
.open-banner .open-banner_title{
   
    font-size:3.2rem;
    line-height: 3.6rem;
    font-weight: 500;
    color:#fff;
    margin-bottom:0;
    letter-spacing: 0.05em;
    max-width: 50rem;
}

.open-banner .open-banner_subtitle{
    font-size:1.8rem;
    font-weight: 400;
    color:#fff;
    margin:2.3rem 0 0 0;
    line-height:2.4rem;
    max-width: 50rem;
    letter-spacing: 0.05em;
}

.open-banner .open-banner_line{
    background:url(imgs/line3.png) left top no-repeat;
    width:5rem;
    height:0.4rem;
    margin:3.9rem 0 0 0;
    
}

  .open{
        
        padding:2.2rem 0 8rem 0;
        background:#f5f8ff;
      
       
    }


    .open .position{
        font-size:1.4rem;
        color:#898989;
        line-height:2.4rem;
        letter-spacing: 0.05em;
    }

    .open .position>span{
        display: inline-block;
        margin:0 0.7rem;
    }

    .open .position a,.open .position a:link,.open .position a:visited{
        color:#898989;
    }

.open .open-type{
    margin:5.4rem 0 0 0;
}
.open .open-type>h3{
    color:#3c3c3c;
    font-size:3.6rem;
    letter-spacing: -0.02em;
    margin:0;
    line-height: 3.6rem;
    text-align: center;
}

.open .open-type>h3 span{
    color:#2a45e8;
    font-weight: 500;
}

.open .open-type .subtitle{
    color:#3c3c3c;
    font-size: 1.8rem;
    text-align: center;
    margin:2.3rem 0 0 0;
    line-height: 1.4rem;

}

.open .open-type .open-type_box{
    display: flex;
    margin:5.3rem 0 0 0;
    
}

.open .open-type .open-type_box .open-type_box_small{
    position:relative;
    max-width: 37.7rem;
    flex:0 0 37.7rem;
    margin-right:2.4rem;
    border-radius:2.5rem;
    overflow: hidden;
}

.open .open-type .open-type_box .open-type_box_small>h4{
    font-size:3.6rem;
    width:100%;
    position:absolute;
    color:#fff;
    top:3.8rem;
    left:0;
    line-height: 4rem;
    text-align: center;
}
.open .open-type .open-type_box .open-type_box_small .num{
    position:absolute;
    bottom:13rem;
    right:1rem;
    color:#2a45e8;
    font-size:20rem;
    line-height: 16rem;
    font-family:"DIN Alternate Bold";
    font-weight: 800;
    margin-bottom:0;
}

.open .open-type .open-type_box .open-type_box_small:nth-child(1) .num{
    right:-0.5rem;
}

.open .open-type .open-type_box .open-type_box_small .info{
    position:absolute;
    bottom:0;
    background:url(imgs/open_desc_bg.png) repeat-x;
    height:21rem;
    margin:0;
    padding:2rem 3.3rem 0 3.5rem;
    color:#fff;
    font-size: 1.8rem;
    line-height: 2.4rem;
    letter-spacing: -0.02em;
    font-weight: 400;
}



.open .open-type .open-type_box .open-type_box_small img{
    width:100%;
    height:auto;
}


.industry{
    min-height: 80.4rem;
    background:#fff;
    overflow: hidden;
    
}

.industry .container{
    position: relative;
}

.industry .info{
    position:absolute;
    top:35.4rem;
    left:5.1rem;
    z-index: 3;
}
.industry .info h3{
    font-size:3.6rem;
    line-height: 3.6rem;
    margin:0;
    color:#3c3c3c;
} 
.industry .info .desc{
    font-size:1.8rem;
    line-height: 2.4rem;
    margin:0.7rem 0 0 0;
    color:#3c3c3c;
} 

.industry .img{
    position:relative;
    width:126.8rem;
    height: auto;
    right:-18.7rem;
}


.industry .img2{
    display: none;
}

.partner{
    background:#f5f8ff;
    min-height: 80.4rem;
    padding:9.4rem 0 11.8rem 0;
}


.partner h3{
    font-size:3.6rem;
    line-height: 3.6rem;
    margin:0;
    color:#3c3c3c;
    text-align: center;
} 
.partner .desc{
    font-size:1.8rem;
    line-height: 2.4rem;
    margin:1.2rem 0 0 0;
    color:#3c3c3c;
    text-align: center;
} 
/* ================= 1. 照片墙外包装（渐隐遮罩） ================= */
        .photo-wall-wrapper {
            position: relative;
            width: 144rem;
            overflow: hidden;
            margin:7.6rem auto 0;
        }

        /* 左侧渐隐 */
        .photo-wall-wrapper::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 200px; /* 渐隐宽度 */
            background: linear-gradient(to right, #f5f8ff 20%, transparent);
            z-index: 10;
            pointer-events: none; /* 穿透鼠标事件 */
        }

        /* 右侧渐隐 */
        .photo-wall-wrapper::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 200px;
            background: linear-gradient(to left, #f5f8ff 20%, transparent);
            z-index: 10;
            pointer-events: none;
        }

        /* ================= 2. 滚动容器 ================= */
        .photo-wall-container {
            width: 100%;
            overflow-x: auto;
            cursor: grab;
            user-select: none;
            padding: 20px 0;
            /* 隐藏默认滚动条 */
            -ms-overflow-style: none;  
            scrollbar-width: none; 
        }
        .photo-wall-container::-webkit-scrollbar {
            display: none;
        }

        /* 轨道 */
        .photo-wall-track {
            display: inline-block;
            white-space: nowrap;
        }

        /* 每一行 */
        .photo-row {
            display: flex;
            gap: 16px; /* 间距 */
            margin-bottom: 16px;
        }

        /* 单个照片卡片 */
        .photo-item {
            width: 190px; /* 卡片宽度 */
            height: 100px;
            flex-shrink: 0;
           
            border-radius: 8px;
            overflow: hidden;
           
            
            transition: transform 0.3s ease;
            position:relative;
        }

        .photo-item:hover {
            transform: scale(1.03);
        }

        .photo-item img {
            width: 100%;
            height: 100%;
         
            pointer-events: none;
        }

        /* 中间行交错偏移：(宽度260px + 间距16px) / 2 = 138px */
        .row-2,.row-4 {
            transform: translateX(103px);
        }

        .faden{
            opacity: 0;
            position: absolute;
            top:0;
            left:0;
            background:url(./imgs/companyslogo_bg.png);
            width:100%;
            height:100%;
            transition: opacity 1s ease;
            display: flex;
            justify-content: center;
            align-items: center;
           
        }
        .photo-item:hover .faden{
            opacity: 1;
        }
        .faden p{
            font-size:14px;
            line-height:16px;
            text-align: center;
            color:#fff;
            margin:0;
            
        }

.technical{
    background:#ffffff;
    min-height: 80.1rem;
    padding:7rem 0 9.5rem 0;
}


.technical h3{
    font-size:3.6rem;
    line-height: 3.6rem;
    margin:0;
    color:#3c3c3c;
    text-align: center;
} 
.technical .desc{
    font-size:1.8rem;
    line-height: 2.4rem;
    margin:1.2rem 0 0 0;
    color:#3c3c3c;
    text-align: center;
} 

.technical .center_box{
    display:flex;
    flex-wrap: wrap;
    margin:2.3rem 0 0 0;
}

.technical .center_box .center{
    width:59.6rem;
    flex:0 0 59.6rem;
    margin:1.7rem 0.8rem 0 0;
    position:relative;
}

.technical .center_box .center:nth-child(2n){
    margin-right:0;
}

.technical .center_box .center .centerimg{
    width:100%;
    height:auto;
}

.technical .center_box .center .info{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    padding:5rem 0 0 5.6rem;
}

.technical .center_box .center .info h3{
    font-size:3.2rem;
    color:#3c3c3c;
    line-height: 3.6rem;
    text-align: left;
    max-width: 25rem;
}

.technical .center_box .center.white .info h3{
    color:#fff;
}

.technical .center_box .center .info .position{
    font-size:1.4rem;
    color:#3c3c3c;
    line-height: 2.4rem;
    position:absolute;
    bottom:3rem;
    margin:0;
    background:url(imgs/open_position.png) left center no-repeat;
    padding:0 0 0 2.2rem;
}

.technical .center_box .center.white .info .position{
    color:#fff;
    background:url(imgs/open_position2.png) left center no-repeat;
}


.product{
    background:#f5f8ff;   
    padding:9.5rem 0 9.5rem 0;
}


.product h3{
    font-size:3.6rem;
    line-height: 3.6rem;
    margin:0;
    color:#3c3c3c;
    text-align: center;
} 
.product .desc{
    font-size:1.8rem;
    line-height: 2.4rem;
    margin:1.2rem 0 0 0;
    color:#3c3c3c;
    text-align: center;
} 

.product .series{
    margin:3.3rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap:1.6rem;
}

.product .series a{
    display: block;
    min-height:3.1rem;
    line-height:3.1rem;
    padding:0 1.3rem;
    border-radius: 1.55rem;
    background:#fff;
    font-size:1.8rem;
    color:#727171;
    
    cursor: pointer;
}

.product .series a:first-child{
    margin-left:0;
}

.product .series .active{
    
    background:#435dfd;
    
    color:#fff;
    
}


.product .product-list li .info .series span{
    display: inline-block;
    border-radius: 1.2rem;
    border:1px solid #435dfe;
    color:#435dfe;
    line-height:2.4rem;
    padding:0 1.4rem;
}

.product .product-list{
    margin:1.6rem 0 0 0;
    list-style: none;
    padding:0;
    display:flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.product .product-list li{
    width:38rem;
    min-height: 56.3rem;
    position: relative;
    background: #fff;
   
   
    overflow: hidden;
}

.product .product-list li:nth-child(3n){
    margin-right:0;
}

.product .product-list li .product-img{
    width:38rem;
    height:38rem;
}

.product .product-list li .info{
    margin:0rem 0 0 0;
    padding:2rem 4.5rem 0 4.5rem;
    
}

.product .product-list li .info .title{
    font-size:1.8rem;
    line-height: 2.4rem;
    color:#3c3c3c;
    letter-spacing: -0.02em;
    font-weight: 500;
    border-bottom:4px solid #ffd02d;
    display: inline-block;
}

.product .product-list li .info .desc{
    font-size:1.4rem;
    line-height: 2rem;
    color:#3c3c3c;
    letter-spacing: -0.02em;
    text-align: left;
    margin:0 0 0 0;
}

.product .product-list li .info .series{
    height:2.4rem;
    margin:0 0 1.9rem 0;
}
.product .product-list li .info .series span{
    display: inline-block;
    border-radius: 1.2rem;
    border:1px solid #435dfe;
    color:#435dfe;
    line-height:2.4rem;
    padding:0 1.4rem;
}

.product .product-list li .info2{
    background:#3b56f7;
    height:100%;
    top:calc(100% - 0.8rem);
    overflow: hidden;
    position: absolute;
    
    opacity: 1;
    padding: 6.6rem 3rem 6rem 3.3rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
   
}


.product .product-list li:hover .info2{
   
    top:0;
    transition: all 1s;
   
   
}

.product .product-list li .info2 .title{
    font-size:1.4rem;
    line-height: 1.6rem;
    height:1.6rem;
    color:#fff;
    letter-spacing: -0.02em;
    border-left:4px solid #ffd02d;
    padding-left:0.5rem;
    margin:0;
    
}

.product .product-list li .info2 .content{
    font-size:1.8rem;
    line-height: 2.4rem;
    color:#fff;
    letter-spacing: -0.02em;
    margin:1.3rem 0 0 0;
    height: 12rem;
    overflow-y:auto;
   
   
}


/* 整体滚动条容器 */
.product .product-list li .info2 .content::-webkit-scrollbar {
  width: 0.5rem;  /* 纵向滚动条的宽度 */
 
}

/* 滚动条轨道 (背景区域) */
.product .product-list li .info2 .content::-webkit-scrollbar-track {
  background: #fff; /* 轨道的背景色 */
 
}

/* 滚动条滑块 (可拖动部分) */
.product .product-list li .info2 .content::-webkit-scrollbar-thumb {
  background: #9fbce3;    /* 滑块的颜色 */
  border-radius: 0.25rem;  /* 滑块的圆角，制造现代感 */
}

/* 鼠标悬停在滑块上时的样式 */
.product .product-list li .info2 .content::-webkit-scrollbar-thumb:hover {
  background: #9fbce3;    /* 颜色加深，提供交互反馈 */
}


.product .product-list li .info2 .more{
    
    padding-right:1.5rem;
    margin-bottom:0;
    margin-top:auto;
    margin-left: auto;
}
.product .product-list li .info2 .more a{
    height:2.9rem;
    line-height:2.9rem;
    color:#fff;
    font-size:1.4rem;
    transition: all 0.5s;
    display: inline-block;
}

.product .product-list li .info2 .more a:hover{
	background: #ffd200;
	color: #3b56f7;
	padding-left:24px;
	
	border-radius: 50px;
	
}

.product .product-list li .info2 .more a span {
    width: 2.9rem;
    height: 2.9rem;
    background: url(imgs/open_more_icon.png) center center no-repeat;
    background-size: cover;
    display: inline-block;
    margin-left: 0.9rem;
    position: relative;
   
    vertical-align: top;
}

.product .product-list li .dot{
    height:1rem;
    background:url(imgs/open_dot.png) center center no-repeat;
    margin:23.3rem 0 0 0;
}
.product .product-list li .waitmore{
    font-size:1.8rem;
    line-height: 2rem;
    color:#cbc9ca;
    text-align: center;
    margin:2.4rem 0 0 0;
}

@media (max-width: 1439.98px) {
     .photo-wall-wrapper {
        width:100%;
    }
}


@media (max-width: 1199.98px) {
    .container{
        padding:0 15px;
    }
    
    html { 
        font-size: 50%; 
    }
   
    .position.row{
        flex-direction: row;
    }

   

    .technical .center_box .center{
        width:57rem;
        flex:0 0 57rem;
        
        
    }




    .product .product-list li{
       
        margin:3rem 8px 0 0;
    }

    .product .product-list li:nth-child(3n){
        margin-right:0;
    }


    
}  


@media (max-width: 991.98px) { 
    html { 
        font-size: 62.5%; 
    }
    

     .container{
        padding:0 2.5rem;
    }

    .open-banner{
        
    }

    .open-banner .open-banner-bg{
        display: none;
    }

 .open-banner .banner-img{
        width:100%;
        height:auto;
     }

     .open-banner .open-banner_content{
        height:auto;
     }

    .open-banner .open-banner_content2{
        width: 90%;
        top:12.5rem;
        left:10%;
        transform: translateX(0);
    }

    .open .open-type .open-type_box{
      
        flex-wrap: wrap;
    }

   .open .open-type .open-type_box .open-type_box_small{
        position:relative;
        width: 100%;
        flex:0 0 100%;
        margin:2rem auto 0;
        border-radius:2.5rem;
        overflow: hidden;
    }

     .technical .center_box .center{
        width:100%;
        flex:0 0 100%;  
    }
    

     .product .product-list li{
        width:100%;
        margin:3rem 0 0 0;
        height:auto;
    }

    .product .product-list li .product-img{
        width:100%;
        height: auto;
    }

    .product .product-list li .info{
        padding:5rem;
    }
   
    .industry{
        display: flex;
        flex-direction: column;
        padding:8.5rem 0 8.5rem 0;
        min-height: auto;
    }

    .industry .info{
        position:relative;
        top:0;
        left:0;
        width: 100%;
        align-items: center;
        display: flex;
        flex-direction: column;
        z-index: 3;
    }

    .industry .img{
        display: none;
    }

    .industry .img2{
        display: flex;
        width:100%;
        height:auto;
    }

    .open .open-type .subtitle{
        font-size:1.6rem;
    }

    .industry .info .desc{
         font-size:1.6rem;
    }

    .partner .desc{
        font-size:1.6rem;
    }

    .technical .desc{
        font-size:1.6rem;
    }

    .technical .center_box .center .info h3{
        font-size:2.4rem;
    }

    .product .desc{
        font-size:1.6rem;
    }
    
  

 }


@media (max-width: 767.98px) { 
    
 }

@media (max-width: 575.98px) { 
    .technical .center_box .center .info{
        padding:2.5rem 0 0 2.8rem;
    }
    .technical .center_box .center .info h3{
        font-size:1.8rem;
        line-height: 2.4rem;
    }
    
   
 }