/* Added capabilities style for 'langwu' on 2024-08-06 */
body{background: #FFF;}
.bg-gray{background: #f5f5f5;}
.mt-md-6{margin-top: 60px;}
.float-left{float: left;}
.breadcrumb{padding-top:40px;}
.solutions ul{text-align: center;}
.solutions ul img{height: 50px;}
.solutions .sub{width: 20%;float: left;margin-bottom: 20px;}

.capabilities .option-box li {
    /*border: 1px solid #ccc;*/
    line-height: 40px;
    cursor: pointer;
    color: #2549d8;
    font-weight: bold;
    padding:0;
}
.capabilities .option-box li a{color: #2549d8;display: block;white-space: nowrap;font-size: 13px;}
.capabilities .option-box li:hover {
    background: #2549d8;
    color: #FFF;
}
.capabilities .option-box li:hover a{color: #FFF;}
.capabilities .option-box li.active a{color: #FFF;}
.capabilities .option-box li.active {
    background: #2549d8;
    color: #FFF;
}
h1,h2,h3,h4,h5,h6{font-family: 'MB';}
.table th{border: 1px solid #000000;text-align: left;}
.table thead th{border: 1px solid #000000;color: #000000;}
.font-text{font-size: 16px;line-height: 25px;}
.btn-primary{background-color: #2549d8;border-color: #2549d8;}
.text-primary {color: #2549d8 !important;}
.capabilities .two{padding:0;}
.capabilities .option-box li.border-c{border-right: 0;}
.capabilities .two ul{display: flex;justify-content: space-between;list-style-type: none;padding:0;margin:0;}
.capabilities .two ul li{padding: 20px 20px;font-size: 17px;font-weight: bold;}
.capabilities .two .table, .table td{border-bottom: 1px solid #000000;text-align: left;color: #000000;}
.capabilities .three{margin-top:100px;}
.capabilities .three .table th,.capabilities .three .table thead th{border:0; border-bottom: 1px solid #000000;}
.capabilities .four{}
.capabilities .four h2{margin:100px 0 50px 0;}
.capabilities .four .popular-materials{display: flex;gap:30px;}
.capabilities .four .popular{background: #f5f5f5;padding: 20px 0;width: 31%;}
.capabilities .four .popular ul{line-height: 40px;margin-top:30px;}
.capabilities .four .popular ul li{font-weight: bold;}
.capabilities .four .popular a{color: #2549d8;}
.banner-bottom{position: relative;}
.banner-bottom .image {
    position: relative;
}
.banner-bottom .overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*capabilities sub page*/
.capabilities-sub .m-top{margin-top:100px;}
.capabilities-sub .one{}
.capabilities-sub .two ul.title{}
.capabilities-sub .two .two-box{padding:0;}
.capabilities-sub .two .two-box ul.table{border-bottom: 1px solid #adadad;padding-bottom: 10px;}
.capabilities-sub .two ul.content{padding:15px 0;align-items: center;}
.capabilities-sub .three .solutions .left{width: 80%;}
.capabilities-sub .three .solutions .right{width: 20%;}
.capabilities-sub .three .solutions .icon{font-size: 40px;margin-right: 10px;color:#000;}
.capabilities-sub .three .solutions .text{padding:5px 10px;font-size: 18px;}
.capabilities-sub .three .solutions .right .btn{margin-top: -20px;}
.capabilities-sub .three .how .step ul{margin-bottom: 10px;}
.capabilities-sub .three .how .step ul .no{font-size: 25px;}
.capabilities-sub .three .how .step ul .text{margin:5px 0;}
.capabilities-sub .three .how .step ul i{font-size: 25px;margin-right: 5px;padding: 0;}
.capabilities-sub .three .how .step .icon{font-size: 30px;margin-right: 18px;}
.capabilities-sub .five{margin-top:45px;}
.capabilities-sub .six{position: relative;}
.capabilities-sub .six .image {position: relative;}
.capabilities-sub .six .overlay-content {position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);}
/*slideshow*/
.slideshow{display: flex;juntify-content: space-between;gap:4%;}
.capabilities-sub .three .slideshow .slideshow-item{width: 49%;}
.capabilities-sub .three .pc-img{display: block;}
.capabilities-sub .three .mobile-img{display: none;}
.slideshow .carousel-indicators{display: flex;justify-content: center;}
.slideshow .carousel-indicators button{width: 20px;height: 20px;margin-right: 10px;line-height: 10px;background: #adadad;}
.slideshow .carousel-indicators button.active{background: #FFF}
.slideshow .carousel-control-prev, .slideshow .carousel-control-next{opacity: 0.7;}
/*slide*/
.slide{float: left;width: 100%;position: relative;}
.slide h2{margin:100px 0 40px 0;}
.slide .title{float: left;width: 100%;text-align: center;margin-bottom: 40px;}
.slide .title b{width: 100%;float:left;line-height: 64px;font-size: 48px;color:#222;font-family: 'MB';margin-bottom: 15px;}
.slide .title p{width: 100%;float:left;line-height:30px;font-size: 20px;padding:  0 20%;color: #363738}
.slide .con{width: 100%;float: left;margin-bottom: 0px;position: relative;}
.slide .con .swiper{width: 100%;float: left;padding-bottom: 50px;}
.slide .con .swiper .swiper-wrapper{float: left;width: 100%;}
.slide .con .swiper .swiper-wrapper .swiper-slide{position: relative;text-align: center;font-size: 18px;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.slide .con .swiper .swiper-wrapper .swiper-slide .content{width: 100%;float: left;position: relative;text-align: left;overflow: hidden;}
.slide .con .swiper .swiper-wrapper .swiper-slide .content .img{float: left;width: 100%;position: relative;overflow: hidden;}
.slide .con .swiper .swiper-wrapper .swiper-slide .content .img p{float: left;width: 100%;position: absolute;bottom: 0;left: 0;background-image: linear-gradient(to top,rgba(0,0,0,0.8),rgba(0,0,0,0));padding: 20px;color: #fff;z-index: 4;}
.slide .con .swiper .swiper-wrapper .swiper-slide .content .img p b{float: left;width: 100%;line-height: 30px;font-size: 20px;font-weight: bold;}
.slide .con .swiper .swiper-wrapper .swiper-slide .content .img p span{float: left;width: 100%;line-height: 30px;font-size: 14px;font-family: 'ML';}
.slide .con .swiper .swiper-wrapper .swiper-slide .content .img img{float: left;width: 100%;height:260px; overflow: hidden;transition: 0.5s;z-index: 1;border:1px solid #f3eded;}
.slide .con .swiper .swiper-wrapper .swiper-slide:hover .content .img img{transform: scale(1.1);}
.slide .con .swiper .swiper-wrapper .swiper-slide .content strong{float: left;width: 100%;line-height: 24px;font-size: 18px;color: #000;font-family: 'ML';margin-top: 10px;/*display: -webkit-box;*/-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
.slide .con .swiper .swiper-pagination-bullet{background:#fff;width: 16px;height: 16px;margin:0 4px;opacity: 1;border-radius: 16px;transition:0.5s;}
.slide .con .swiper .swiper-pagination-bullet-active{background: var(--themefive);width: 30px;height: 16px;opacity: 1;}
.button-next,
.button-prev{width: 40px;height: 40px;line-height: 44px;border-radius: 40px;text-align: center;display: inline-block;z-index: 99;overflow: hidden;transition:0.5s;position: absolute;top: 50%;z-index: 10;cursor: pointer;display: flex;align-items: center;justify-content: center;}
.button-next{border:1px solid var(--themefive);top:300px;right:-60px;}
.button-prev{border:1px solid var(--themefive);top:300px;left: -60px;}
.button-next span,
.button-prev span{color: var(--themefive)}
.button-next:hover,
.button-prev:hover{background: var(--themefive);color: #fff;border: 1px solid var(--themefive)}
.button-next:hover span,
.button-prev:hover span{color: #fff;}
.slide-box{padding: 0;display: flex;justify-content: space-between;}
.slide-box .left-box{width: 48%;padding:30px 20px;background: #f5f5f5;}
.slide-box .right-box{width: 48%;padding:30px 20px;background: #f5f5f5;}

@media (max-width: 768px) {
    .font-text {font-size: 14px;line-height: 22px;}
    .flex-mobile{display: grid;/*flex-direction: column;*/}
    .page_focus h1{font-size: 22px;color: #2549d8;}
    .solutions .sub{width: 33.3%;}
    .capabilities h2,.capabilities-sub h2{font-size: 22px;}
    .slide h2{margin: 50px 0 40px 0;}
    .capabilities .one .content{padding: 10px;margin-top: 30px;}
    .capabilities .three{margin-top: 50px;}
    .capabilities .three .title{margin-bottom: 30px;}
    .capabilities .three .row {
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        white-space: nowrap;
    }
    .capabilities .three .row::-webkit-scrollbar {display: none;}/* 隐藏滚动条 */
    .capabilities .three .table th,
    .capabilities .three .table td {display: table-cell !important;white-space: nowrap;min-width: 100px;}
    .capabilities .four{padding: 0;}
    .capabilities .four h2{margin:50px 15px 20px 15px;}
    .capabilities .four .content{padding:0 15px 50px 15px;}
    .capabilities .four .popular-materials{padding: 50px 15px; display: flex;flex-wrap: wrap;gap: 30px;background: #f5f5f5;}
    .capabilities .four .popular{width: 100%;padding: 0;}
    .capabilities .four .popular ul {line-height: 30px;margin-top: 15px;}
    .slide{padding: 0;}
    .slide .con .swiper .swiper-wrapper .swiper-slide .content .img img{height: auto;}
    .slide .con .swiper .swiper-wrapper .swiper-slide .content strong{font-size: 14px;line-height: 20px;}
    .slide .button-next{display: none;}
    .slide .button-prev{display: none;}
    .slide-box{display: grid;position: relative;}
    .slide-box .left-box{width: 100%;padding:50px 15px 30px 15px}
    .slide-box .right-box{width: 100%;padding: 15px 15px 120px}
    .slide-box .learn-more{position: absolute;bottom: 50px;}
    .banner-bottom{padding:0; margin: 0;}
}
.capabilities-sub .two .table-container {display: block;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: thin;-ms-overflow-style: -ms-autohiding-scrollbar;width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.capabilities-sub .two .table-container::-webkit-scrollbar {display: none !important;}
.capabilities-sub .two .table-container {-ms-overflow-style: none;scrollbar-width: none;}
@media (max-width: 768px) {
    .capabilities-sub .m-top{margin-top: 50px;}
    .capabilities-sub .one{padding:0;}
    .capabilities-sub .one h2{padding: 0 15px;}
    .capabilities-sub .one .row{margin: 50px 0 0 0 !important;padding: 0;}
    .capabilities-sub .two{padding: 0;}
    .capabilities-sub .two .table-container {padding-bottom: 10px;}
    .capabilities-sub .row-box{margin:0;}
    .capabilities-sub .two .two-box ul.table {min-width: 600px;flex-wrap: nowrap;}
    .capabilities-sub .two ul.title,
    .capabilities-sub .two ul.content {min-width: 600px;display: table !important;table-layout: auto;width: 100%;}
    .capabilities-sub .two ul.title li,
    .capabilities-sub .two ul.content li {display: table-cell !important;vertical-align: top;flex: none;padding: 15px 10px;min-width: 100px;}
    .capabilities-sub .two ul.title li,
    .capabilities-sub .two ul.content li {min-width: 120px;}
    .capabilities-sub .two ul.content li {font-size: 14px;padding: 12px 8px;}
    .capabilities-sub .two .two-box ul.table{padding: 0;}
    .solutions .solution-items{display: flex;flex-wrap: wrap;}
    .capabilities-sub .three{padding: 0;}
    .capabilities-sub .three .solutions .text{padding: 0;font-size: 14px;}
    .capabilities-sub .three .solutions .btn{margin: 0 15px;}
    .capabilities-sub .three .slideshow{display: flex;gap: 10px;}
    .capabilities-sub .three .slideshow .slideshow-item{width: 50%;}
    .capabilities-sub .three .slideshow .slideshow-item h5{margin: 50px 0 15px 0;font-size: 16px;}
    .capabilities-sub .three .content-box{margin-top: 0 !important;background: #f5f5f5;padding:50px 0 50px 0;}
    .capabilities-sub .three .content-box h5{margin-bottom: 15px;}
    .capabilities-sub .three .content-box .learn-more{margin-top: 30px;}
    .capabilities-sub .three .pc-img{display: none;}
    .capabilities-sub .three .mobile-img{display: block;}
    .capabilities-sub .three .how .bg-gray{background: #FFFFFF !important;}
    .capabilities-sub .three .how h5{margin-bottom: 15px;}
    .capabilities-sub .three .solutions{margin: 0;}
    .capabilities-sub .three .solutions .col-12{padding: 0;}
    .slide .con .swiper .swiper-wrapper .swiper-slide .content h5{font-size: 14px;margin-top: 10px;}
    .capabilities-sub .five {margin-top: 0;padding: 0;}
    .capabilities-sub .five h2{padding:0 15px;}
    .capabilities-sub .five .item{padding:0;}
    .capabilities-sub .six{padding: 0;}
    .capabilities-sub .six h3{font-size: 18px;}
    .capabilities-sub .seven h3{font-size: 18px;}
    .capabilities-sub .seven .content-box{font-size: 14px;min-height: 90px;max-height: 90px;overflow: auto;}
}