.padding{ padding-top:120px; padding-bottom:120px; }
.padding-bottom-120{ padding-bottom:120px;}
.padding-top-0{ padding-top:0; }
.swiper{--swiper-theme-color:  var(--blue);/* 设置Swiper风格 */--swiper-navigation-color: #172259;/* 单独设置按钮颜色 */--swiper-navigation-size: 24px;/* 设置按钮大小 */}



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

4. PAGE LOADER

------------------------------------------------*/
#page-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background:#000;
    z-index: 100001;
    transition: opacity 0.8s ease 0.8s, height 0.1s ease 1.6s;
    overflow: hidden;
}
.page-is-loaded #page-loader { opacity: 0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 0;}

#page-loader .page-loader-inner {
    transition: opacity 0.6s ease 0.3s;
}
.page-is-loaded #page-loader .page-loader-inner { opacity: 0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

#page-loader .loader-figure,
#page-loader .loader-label {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#page-loader .loader-figure {
    height: 0px;
    width: 0px;
    box-sizing: border-box;
    border: 0px solid var(--main);
    border-radius: 50%;
    -webkit-animation: figure 1.2s ease infinite ;
    -moz-animation: figure 1.2s ease infinite ;
    animation: figure 1.2s ease infinite ;
}
@-moz-keyframes figure {
    0% { height: 0; width: 0; }
    30% { height: 40px; width: 40px; border-width: 21px; opacity: 1; }
    100% { height: 40px; width: 40px; border-width: 0; opacity: 0; }
}
@-webkit-keyframes figure {
    0% { height: 0; width: 0; }
    30% { height: 40px; width: 40px; border-width: 21px; opacity: 1; }
    100% { height: 40px; width: 40px; border-width: 0; opacity: 0; }
}
@keyframes figure {
    0% { height: 0; width: 0; }
    30% { height: 40px; width: 40px; border-width: 21px; opacity: 1; }
    100% { height: 40px; width: 40px; border-width: 0; opacity: 0; }
}

#page-loader .loader-label {
    margin: 50px 0 0 0;
    font-size: 12px; color: #fff;
    line-height: 18px;
}

#page-loader .loader-logo {
    position: absolute;
    left: 50%;
    top: 40%; transform: translate(-50%, -50%);

}
#page-loader .loader-logo{ height: 40px;}







.title{background: -o-linear-gradient(left, #ffffff 0%, #e94713 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(100%, #e94713));
    background: linear-gradient(90deg, #ffffff 0%, #e94713 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

.title1{background: -o-linear-gradient(left, #e94713 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e94713), color-stop(100%, #ffffff));
    background: linear-gradient(90deg, #e94713 0%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

.btnbg{background: -o-linear-gradient(left, #f5a590 0%, #e94713 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f5a590), color-stop(100%, #e94713));
    background: linear-gradient(90deg, #f5a590 0%, #e94713 100%);box-shadow: 0px 10px 40px rgba(234,77,29,0);}

html{height: 100%;}


.banner{overflow:hidden;}
.banner .pagewidth{ position:relative; height:100vh;  }
.banner .pagewidth .text{ z-index: 2; position:absolute; left:10%; top:50%; width: 40%; transform:translateY(-50%); }
.banner .pagewidth .text h2{ font-size: 60px; font-weight: 400;line-height: 1.2; display:inline; text-align:left;  }
.banner .pagewidth .text p{ color:#fff; font-size: 16px; line-height: 1.6; padding-top: 30px;}
.banner .pagewidth .video-container{ position:absolute; width:140%; object-fit: cover; left:70%; top:50%; transform:translate(-50%,-50%); z-index:1 }
.banner .pagewidth .video-container video{ width: 100%;}
.banner .pagewidth .video-container img{ width: 100%;}


.about{overflow:hidden;}
.about .pagewidth{height:100vh; position: relative;}
.about .pagewidth .text{ z-index: 2; font-size:24px; width: 100%; position: absolute; color: #fff; top: 50%; transform: translateY(-50%);margin: 0 auto; text-align:center;}
.about .pagewidth .bg{ opacity: 0.4; position:absolute; width:600px; object-fit: cover; left:-10%; top:50%; transform: translateY(-50%); z-index:1}


.product{ overflow:hidden; }
.product .pagewidth{ position:relative; }
.product h2.title{ font-size:32px; font-weight: 300; margin-bottom: 30px;}
.tab_box {height: 50px; /* 与tab的高度保持一致 */position: relative; /* 作为tab定位的参考 */margin-bottom: 20px;}
.tab {height: 50px;z-index: 9;transition-duration: 0.3s;}
.tab.fixed {position: fixed;top:77px;transition-duration: 0.3s;}
.tab ul {display: flex;list-style: none;height: 100%;align-items: center; grid-gap: 15px;}
.tab li { cursor: pointer; color: #555; display: flex; justify-content: space-between; position: relative; align-items: center; grid-gap: 15px; border-radius: 40px; height: 50px; border:#000 solid 1px; background:rgba(0,0,0,0.6);-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px); padding-left: 15px; padding-right: 15px; transition-duration: 0.3s;}
.tab li.active {color:#fff;border:#fff solid 1px;}
.tab li img{ width: 36px; height: 36px; opacity: 0.5; transition-duration: 0.3s; position: absolute; left: 5px;}
.tab li.active img{ opacity: 1;animation: rotate 8s linear infinite;}


@keyframes rotate {
    /* 动画起始状态 */
    0% {
        transform: rotate(0deg);
    }
    /* 动画结束状态 */
    100% {
        transform: rotate(360deg);
    }
}





.product .content { padding-top:40px; margin-bottom:100px; }
.product .content .row{ }
.product .content .row .info h3{ line-height: 1.2; font-size:24px; padding-left:0px;  font-weight:normal; color:#fff; position: relative; z-index: 4; margin-bottom: 30px;}
.product .content .row .info h3:after{content: "";  position: absolute; left:-16px; top: 50% ;transform: translateY(-50%); width: 4px; height: 24px; background:var(--main);}
.product .content .row{ border-left: #ccc solid 1px; min-height: 420px; padding-left: 30px; position:relative;display:grid; padding-top: 0px; padding-bottom: 0px; grid-template-columns: 480px 650px; grid-gap: 50px; }
.product .content .row .info{ position:relative;position: -webkit-sticky; position: sticky;top:110px;}
.product .content .row .info .top{ padding-top: 30px; position:absolute; left:0px; top:0px;  font-weight:300; font-size: 16px; color: #fff; padding-top: 50px;}
.product .content .row .info .bottom{ position:absolute; left:0px; bottom:0px;  font-weight:300; font-size:16px; color: #999; padding-top: 10px;}
.product .content .row .info .top p:last-child{ color:var(--main); font-weight:500; padding-top:10px;  }
.product .content .row video{width: 100%;}
.product .content .row img{width: 100%;}


.product .content .row .info.en h3{ line-height: 1.2; font-size:24px; padding-left:0px;  font-weight:normal; color:#fff; position: relative; z-index: 4; margin-bottom: 30px;}
.product .content .row .info.en h3:after{content: "";  position: absolute; left:-16px; top: 50% ;transform: translateY(-50%); width: 4px; height: 44px; background:var(--main);}
.product .content .row .info.en .top{top:30px;}





.product .content_1 .bg-video{ margin-top: 20px;}

.subMenu {height: 50px; padding-top: 5px; z-index: 1000;width: 100%;background: none!important;}
.subMenu .inner {display: flex; justify-content: left; align-items: center; grid-gap: 20px;  width:var(--width); margin:0 auto;border-radius:6px;transition-duration: 0.3s; }
.subNavBtn {display: block; text-decoration: none;-webkit-backdrop-filter:blur(15px); backdrop-filter: blur(15px);font-size: 18px;text-align: center;color: #fff;border-radius: 6px; padding: 10px 30px; border:#fff solid 1px; }
.subMenu a:hover {border:var(--main) solid 1px; color:var(--main);}

.card_3d {position: relative;perspective: 1500px; left: 240px; top: 220px; opacity: 0.9;}
.card_3d .card {
    position: absolute;
    transform-style: preserve-3d;
    width: 400px;
    border-radius: 4px;
    border: #fff solid 1px;
    background: rgba(255, 255, 255, 0.2); box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: white;
    font-weight: bold;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    cursor: pointer;
}
.card_3d .card img{ width:100%;  }


.number { overflow:hidden; }
.number .pagewidth{height:80vh; position: relative;}
.number .pagewidth img{ position:absolute; width: 1280px; right: -600px; top:80%; z-index:-1; opacity:0.4 }
.number .pagewidth .content{ position: relative; top:50%; transform: translateY(-50%); display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:50px; }
.number .pagewidth .content .item{ text-align:center; color:#fff; font-size:24px; font-weight:300 }
.number .pagewidth .content .item h3{font-size:48px; font-weight: 300; padding-bottom: 40px; margin-bottom: 40px; color:var(--main); position:relative;line-height:1; }
.number .pagewidth .content .item h3 span{font-weight: 300; padding-left: 5px; padding-right: 5px;}
.number .pagewidth .content .item h3:after{content:""; transition-duration: 0.3s; position: absolute; left: 50%;transform: translateX(-50%); bottom: 0px; width:0px; height: 1px; background: var(--main);}
.number .pagewidth .content .item p{ font-size:16px; text-align: center; font-family:  "PingFang SC";}
.number .pagewidth .content .item:hover h3:after{content:""; position: absolute; left: 50%;transform: translateX(-50%); bottom: 0px; width:100px; height: 1px; background: var(--main);}




.client{ overflow:hidden; }
.client .title{font-size:32px; font-weight: 300;margin-bottom:48px; padding-bottom: 30px; }
.client .title::after{content:""; transition-duration: 0.3s; position: absolute; left: 0; bottom: 0px; width:0px; height: 1px; background: var(--main);}
.client .title:hover::after{content:""; position: absolute; bottom: 0px; width:100px; height: 1px; background: var(--main);}
.client .content{ position:relative; display: flex;  justify-content: space-between;  grid-gap: 20px;}
.client .map{ position: relative; width: 880px;}
.client .map img{ width: 100%;}
.client .map .layui-tabs-header{ position: absolute; z-index: 3; width: 100%; height:100vh;}

.client .map .layui-tabs-header .add{ position:absolute; z-index:3;display:flex; cursor:pointer;justify-content:left; align-items: center;  grid-gap:5px; }
.client .map .layui-tabs-header .add .round{border-radius: 40px; position: relative; transition-duration: 0.3s; width: 10px;height: 10px; border:#d58a5a solid 2px; background: #fff; line-height: 16px;}
.client .map .layui-tabs-header .add .round:after{content: "";position: absolute;transition-duration: 0.3s;left: 2px;top: 2px;width: 6px;height: 6px;border-radius: 10px;background: #e85028;}
.client .map .layui-tabs-header .add.layui-this .round{ transform: scale(1); border:#81cac5 solid 2px; background: #fff; transform: scale(1.4);}
.client .map .layui-tabs-header .add.layui-this .round:after{content:""; position:absolute; left:3px; top:3px; width:4px; height:4px; border-radius:6px;background:#81cac5; }
.client .map .layui-tabs-header .add span{color: rgba(255,255,255,0.7); font-size: 12px;transition-duration: 0.3s;}
.client .map .layui-tabs-header .add.layui-this span{color:rgba(255,255,255,1); font-size: 12px;}

.client .map .layui-tabs-header .add1{left:574px; top:166px;}/*哈萨克斯坦*/
.client .map .layui-tabs-header .add2{left: 600px;top: 187px;}/*吉尔吉斯斯坦*/
.client .map .layui-tabs-header .add3{left: 496px;top: 196px;}/*塔吉克斯坦*/
.client .map .layui-tabs-header .add4{left: 680px;top: 200px;}/*中国北京*/
.client .map .layui-tabs-header .add5{left: 450px;top: 270px;}/*乍得*/
.client .map .layui-tabs-header .add6{left: 213px;top: 313px;}/*厄瓜多尔*/









.client .map .data{ position: absolute; bottom: 0; left: 0; z-index: 3;}
.client .map .data ul li{ margin-bottom: 15px;}
.client .map .data ul li h3{ color: var(--main);  font-size: 32px; margin-bottom: 0px;}
.client .map .data ul li p{ color: #fff;}
.client .layui-tabs-body{ width: 360px;}
.client .layui-tabs-body .layui-tabs-item{ color: #fff;}
.client .layui-tabs-body .layui-tabs-item .info{ padding-bottom: 10px;}
.client .layui-tabs-body .layui-tabs-item .info p{ margin-bottom: 10px;}
.client .layui-tabs-body .layui-tabs-item .info p:first-child{ color: var(--main); font-weight:bold;}
.client .layui-tabs-body .layui-tabs-item .info h2{ font-size: 24px; margin-bottom: 10px; line-height: 1.2}
.client .layui-tabs-body .projectswiper .swiper-slide{ position: relative}
.client .layui-tabs-body .projectswiper .swiper-slide img{border-radius: 6px; width: 100%; height: 240px; object-fit: cover}
.client .layui-tabs-body .projectswiper .swiper-slide p{ position: absolute; left: 0; bottom: 0; right: 0px; width: 100%; padding-top: 10px; padding-bottom: 10px; background: rgba(0,0,0,0.7);text-align: center; color: #fff;}
.client .layui-tabs-body .projectswiper .swiper-button-next{background:var(--main);width: 36px; height: 36px;border-radius: 48px; right: 20px; opacity: 0.4; transition-duration: 0.3s;}
.client .layui-tabs-body .projectswiper .swiper-button-next:hover{ opacity:1;}
.client .layui-tabs-body .projectswiper .swiper-button-next:after{color: #fff;font-size: 14px;}
.client .layui-tabs-body .projectswiper .swiper-button-prev{background:var(--main);width: 36px; height: 36px;border-radius: 48px; left: 20px; opacity: 0.4; transition-duration: 0.3s;}
.client .layui-tabs-body .projectswiper .swiper-button-prev:hover{ opacity:1;}
.client .layui-tabs-body .projectswiper .swiper-button-prev:after{color: #fff; font-size: 14px;}


.layui-layer{ border-radius: 6px!important;  overflow: hidden; }
#layer-wrapper .box{ width:820px; display: grid; grid-template-columns: repeat(2,1fr);  overflow: hidden; }
#layer-wrapper .box .img {  background: var(--main);;}
#layer-wrapper .box .img img { width: 100%; height: 100%; object-fit:cover; }


#layer-wrapper .box .info{ padding: 40px;}
#layer-wrapper .box .info h2 { color: var(--main); margin-bottom: 15px; padding-top: 20px;}
#layer-wrapper .box .info p { color: #000; margin-bottom: 10px; position: relative ;padding-left: 40px;}
#layer-wrapper .box .info p span{ position: absolute; left: 0px;}
#layer-wrapper .box .info p.email{ position: relative;padding-bottom: 20px; margin-bottom: 20px;}
#layer-wrapper .box .info p.email::after{content: "" ;position: absolute;left:0px; bottom: 0px; width: 40px; height: 2px; background: var(--main);}

#layer-wrapper .box .info_en{ padding: 40px;}
#layer-wrapper .box .info_en h2 { color: var(--main); margin-bottom: 15px;}
#layer-wrapper .box .info_en p { color: #000; margin-bottom: 10px; position: relative ;}
#layer-wrapper .box .info_en p span{ position: absolute; left: 0px;}
#layer-wrapper .box .info_en p.email{ position: relative;padding-bottom: 20px; margin-bottom: 20px;}
#layer-wrapper .box .info_en p.email::after{content: "" ;position: absolute;left:0px; bottom: 0px; width: 40px; height: 2px; background: var(--main);}
#layer-wrapper .box .info_en p:last-child{ margin-bottom: 0px;}


.explore{ text-align:center; padding-top:180px; padding-bottom:180px;}
.explore .pagewidth{ position:relative; perspective: 1000px; /* 透视效果，营造3D空间感 */}
.explore .pagewidth img{ position:absolute; left:50%;top:-200px; width: 800px; margin-left: -400px; z-index:-1; opacity:0.4;transition: transform 0.3s ease; transform-style: preserve-3d; }
.explore h3{ font-size:42px; font-weight:200; text-align:center; color: #fff; position: relative; z-index: 1;}
.explore .more{ text-align:center; padding-top:30px; position: relative; z-index: 1; }
.explore .more a{color:#fff; padding:10px 40px; background: var(--main); border-radius:6px; transition-duration: 0.3s; display: inline-block;  transform: scale(1); box-shadow: 0px 0px 10px rgba(239,117,85,0)}
.explore .more a:hover{color:#fff; transform: scale(1.07);box-shadow: 0px 0px 30px rgba(239,117,85,0.7)} }


@media screen and (max-width: 1920px) {

}

@media screen and (max-width: 1600px) {

}

@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 480px) {
    .banner .pagewidth .text{ width:80%; top:30%; }
    .banner .pagewidth .text h2{ font-size:32px; }
    .banner .pagewidth .video-container{
        width: 300%;
        left: 50%;
        top: 65%;
        transform: translate(-50%,-50%);

    }
    .banner .pagewidth{
        height: 100vh;

    }
.about .pagewidth .text{ font-size:14px; width:auto; left: 30px;right: 30px; top:35%; }
.about .pagewidth .text br{ display:none; }
.about .pagewidth .bg{width: 400px; top:30%; }
.about .pagewidth{ height:60vh }
.product h2.title{ font-size:24px; }
.tab_box{ width:100%;}
.tab.fixed{ right:20px; left:20px; top:74px; }
.tab ul{ display: block; width:calc(100% - 22px)!important;}
.tab li.active{ display: flex!important; width:calc(100% - 22px)!important; }
.tab li{ display:none; position:absolute;left:0px; top:0px; right:0px; padding-left: 15px; padding-right:15px }
.tab li:first-child{ display:flex; width:calc(100% - 22px)!important;}


.product .content .row{ display:block; padding-left: 20px; min-height: auto;}
.product .content .row .info{ position:initial; padding-left:0px; }
.product .content .row .info h3{ padding-left:0  }
.product .content .row .info h3{ font-size:18px; }
.product .content .row .info h3:after{ display:none; }
.product .content .row .info .top{ position:initial; font-size: 14px; padding-top: 0px; padding-left:0px; }
.product .content .row .info .bottom { position:initial; font-size:14px; }
.card_3d{ left:0; transform:scale(0.5); height:200px; top:50px; left:30px; }
.product .content{  margin-bottom:40px; }
.number .pagewidth .content{ grid-template-columns: repeat(2, 1fr);  grid-gap:80px 30px;}
.number .pagewidth{height: auto; padding-top: 100px; padding-bottom: 100px;}
.number .pagewidth .content{ transform:translateY(0); }
.number .pagewidth .content .item h3{ font-size:32px; }
.number .pagewidth .content .item p{ font-size:14px; }
.number .pagewidth .content .item h3{ padding-bottom:20px; margin-bottom:20px; }
.number .pagewidth .content .item h3:after{width:60px; }
.number .pagewidth img{ width:1010px;right:-420px; top:120% }
.client .content{ display:block; }
.client .map{ width:100% }

.client .layui-tabs-body{ width:100% }

.client .title{ font-size:24px; }
.client .map .data{ position:initial; }
.client .title{ margin-bottom:0; } 
.client .map .data ul{ display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:20px; }
.client .map .layui-tabs-header{ position: absolute; bottom:20px; height:auto; }
.client .map .layui-tabs-header .add{ position: initial; margin-bottom: 15px; font-size: 14px; height: 25px; line-height: 25px;}
.client .map .layui-tabs-header .add .round{ display:none; }
.client .map .layui-tabs-header .add.layui-this span{ color:var(--main); position:relative; font-weight: bold;}
    .client .map .layui-tabs-header .add.layui-this span::after{content: ""; position: absolute;border: 8px solid transparent; border-right-width: 0; left:-20px; transform: translateY(-50%); border-left-color: var(--main); top: 50%;}



    .client .map .layui-tabs-header .add span{ font-size:14px; }
    .client .map .layui-tabs-header .add.layui-this span{ font-size:14px; }
.client .map .data ul li h3{ font-size:24px; }
.client .map .data ul li p{ font-size:13px; }
.client .map .data ul{ grid-gap: 10px;}
.explore .pagewidth{ height:300px; }
.explore .pagewidth img{ width:600px; margin-left:-300px; top:-90px; }
.explore h3{ font-size:24px; }
.explore{padding-top: 80px; padding-bottom: 20px;}
.client .layui-tabs-body .layui-tabs-item .info{ padding-top:0px; }
#layer-wrapper .box{ width:auto; display:block; }
#layer-wrapper .box .info{ padding:30px; }
#layer-wrapper .box .info h2{ padding-top:0; }


}
/*小尺寸手机*/
@media screen and (max-width: 320px) {

}
/*横屏*/
@media all and (orientation : landscape) {}
/*竖屏*/
@media all and (orientation : portrait){}