*{
    margin: 0;
    padding: 0;
	font-size:16px;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    color: black;
    text-decoration:none;
}
a:hover, a:focus{
	text-decoration:none;
	/* color:white; */
}
h4{
    margin-block-start:0;
    margin-block-end:0;
}
p{
	margin:0;
}

/* 通用 */
.banner{
    width: 100%;
    height: 650px;
}
.banner img{
    width: 100%;
    height: 100%;
	object-fit:cover;
}
.navall{
    width: 100%;
    background-color: #f4f4f4;
}
.navlist{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
}
.navitem{
    padding:15px 10px;
    font-size: 16px;
}
.navitem:hover{
    color: #d20104;
}
.navactive {
    position: relative;
	border-bottom:3px solid #d20104;
	color: #d20104;
    /* &::after {
        position: absolute;
        content: '';
        background: url(/images/navafter.png) no-repeat;
        width: 50px;
        height: 42px;
        background-size: auto 100%;
        left: 50%;
        bottom: -45px;
        transform: translate(-50%, 0);
    } */
}

#pages{
	margin:3% auto;
	/* margin-left:45%; */
	font-size:14px;
	text-align: center;
}
#pages a{
	border: 1px solid #d20104;
	font-size:14px;
    padding: 3px 9px 3px 9px;
}


/* 首页 */
.iabnner{
    width: 100%;
    height: 100vh;
}
.iabnner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iabout{
    width: 100%;
    /* height: 500px; */
}
.iaboutall{
    width: 100%;
    height: 100%;
    display: flex;
}
.iaboutleft{
    width: 65%;
    height: 100%;
    background: url(/images/iaboutleft.jpg) no-repeat bottom;
    background-size: 100% auto;
    display: flex;
    justify-content: end;
    padding: 100px 0 100px 5%;
    box-sizing: content-box;
    background-color: #f4f4f4;
}
.iabouth3{
    display: flex;
    align-items: center;
}
.iabouth3 h3{
    font-size: clamp(24px,2vw,36px);
    font-weight: bold;
    line-height: 1;
}
.iabouth3 p{
    flex: 1;
    height: 2px;
    background-color: black;
}
.iabouth4{
    position: relative;
    margin: 7vw 0 2vw;
    &::after{
        position: absolute;
        content: 'ABOUT US';
        color: #d20104;
        opacity: 0.3;
        font-size: clamp(30px,3.1vw,60px);
        font-weight: bold;
        left: 0;
        bottom: 0.3em;
        line-height: 1;
    }
}
.iabouth4 h4{
    font-size: clamp(24px,2vw,36px);
}
.iaboutcont{
    width: 70%;
}
.iaboutcont p{
    width: 100%;
    line-height: 30px;
}
.iaboutlmain{
    width: 100%;
    max-width: 1040px;
    height: 100%;
}
.iaboutlmain a{
    display: inline-block;
    position: relative;
    border: 1px solid #d20104;
    margin-top: 4vw;
    padding: 10px;
    padding-right: 40px;
    &::after{
        position: absolute;
        content: '';
        background: url(/images/iaboutjt.png) no-repeat center;
        width: 30px;
        height: 10px;
        background-size: 100%;
        right: 6px;
        top: 50%;
        transform: translate(0,-50%);
    }
}
.iaboutright{
    width: 35%;
    /* height: 100%; */
    background-color: #0561a6;
    position: relative;
}
.iabouta{
    position: absolute;
    width: 100%;
    bottom: 7%;
    left: -20%;
}
.iaboutimg{
    position: relative;
    width: 100%;
    padding-top: 86%;
}
.iaboutright img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}



/* 首页产品 */
.ipro{
    width: 100%;
    max-width: 1920px;
    margin: 50px auto 0;
}
#wrap{
    /* position: absolute; */
    overflow: hidden;
    /* top:0; left:0; right:0; bottom:0; */
    margin:auto;
    width: 100%;
    height: 90vh;
}
#wrap ul li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#wrap > ul{
    width: 100%;
    list-style: none;
    display: flex; /* 使用flex布局替代浮动 */
    height: 100%;
    gap: 15px;
}
#wrap > ul > li{
    height: 100%;
    cursor: pointer;
    flex: 0 0 calc(15% - 15px); /* 初始宽度15% */
    transition: all 0.5s ease; /* 使用CSS过渡替代jQuery动画 */
    position: relative;
    overflow: hidden;
}
#wrap > ul > li.curr{
    flex: 0 0 55%; /* 激活状态宽度55% */
}
#wrap > ul > li > .text{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
}
.curr .text{
    background: rgba(0, 0, 0, 0.0) !important;
    animation: all 0.5s;
}
#wrap > ul > li > .text p{
    color: #fff;
    font-size: clamp(16px,1.7vw,30px);
}
.text h3{
    display: none;
}
.iprotext{
    position: absolute;
    width: 90%;
    display: flex;
    bottom: 0;
    right: 0;
    align-items: end;
    justify-content: space-between;
    padding: 20px 40px 20px 0;
    border-bottom: none;
    margin-bottom: 7%;
}
.curr .iprotext{
    position: absolute;
    width: 90%;
    display: flex;
    bottom: 0;
    right: 0;
    align-items: end;
    justify-content: space-between;
    padding: 20px 40px 20px 0;
    border-bottom: 2px solid white;
    margin-bottom: 7%;
}
.curr .text p{
    font-size: 36px;
}
.curr .text h3{
    display: block;
    font-size: clamp(24px,5.3vw,100px);
    opacity: 0.3;
    color: white;
    line-height: 1;
    /* height: 0; */
}

/* 首页案例 */
.icase{
    width: 100%;
    background-color: #eeeeee;
}
.icaseall{
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 10px 150px;
    overflow: hidden;
}
.icasetop{
    width: 70%;
	text-align:justify;
}
.icasetop h3{
    font-size: clamp(24px,2vw,48px);
    line-height: 1;
}
.icasetop h4{
    font-size: clamp(24px,1.7vw,36px);
    color: #555555;
    margin-bottom: 20px;
}
.icasetop p{
    font-size: 16px;
    color: #777777;
    line-height: 24px;
}
.icasetop a{
    position: relative;
    padding: 15px 45px 15px 15px;
    margin-top: 30px;
    border: 1px solid #787878;
    display: inline-block;
    &::after{
        position: absolute;
        content: '';
        background: url(/images/casejt.jpg) no-repeat center;
        width: 30px;
        height: 15px;
        background-size: 100% auto;
        top: 50%;
        right: -15px;
        transform: translate(0 , -50%);
    }
}
.icase2{
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 10px;
    margin-top: -50px;
}
.mySwiper1 .swiper-slide{
    position: relative;
	width:100%;
	padding-top:23%;
}
.mySwiper1 .swiper-slide img{
	position: absolute;
	width:100%;
	height:100%;
	object-fit:cover;
	left:0;
	top:0;
}
.icase2pa{
    position: absolute;
    color: white;
    bottom: 5%;
    left: 5%;
    padding-left: 30px;
    &::before{
        position: absolute;
        content: '';
        background: url(/images/db.png) no-repeat center;
        width: 30px;
        height: 30px;
        left: 0;
        top: 50%;
        transform: translate(0,-50%);
    }
}


/* 首页服务 */
.ifuwu{
    width: 100%;
    max-width: 1600px;
    margin: 75px auto;
    padding: 0 10px;
}
.ifuwu h3{
    font-size: clamp(24px,2.6vw,48px);
    text-align: center;
}
.ifuwu ul{
    display: flex;
    justify-content: space-between;
    padding: 40px 0;
}
.ifuwu ul a{
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ifuwu ul a img{
    transition: transform 1s ease-in-out;
}
.ifuwu ul a:hover img{
    transform: rotateY(360deg);
}
.fuwuback{
    position: relative;
    width: 100%;
    /* height: auto; */
    min-height: 200px;
}
.fuwuback img{
    /* position: absolute; */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fuwupa{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.fuwupa h4{
    font-size: clamp(24px,2vw,48px);
    color: white;
	text-align: center;
}
.fuwupa p{
    font-size: clamp(12px,1vw,16px);
    line-height: 2em;
    text-align: center;
    color: white;
    margin: 1vw 0 5vw;
}
.fuwupa a{
    display: inline-block;
    border: 1px dashed white;
    color: white;
    padding: 10px 30px;
    background-color: rgba(255, 255, 255, 0);
    transition: all 2s;
}
.fuwupa a:hover{
    background-color: rgba(255, 255, 255, 1);
    color: #d20104;
}

/* 首页新闻 */
.inews{
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 10px;
}
.inews h3{
    position: relative;
    font-size:48px;
    text-align: center;
    margin: 50px 0;
    &::after{
        position: absolute;
        content: 'NEWS';
        font-size: 72px;
        color: black;
        opacity: 0.15;
        font-weight: bold;
        top: -70%;
        left: 50%;
        transform: translate(-50%,0);
    }
}
.inewsimg{
	position: relative;
    width: 100%;
	padding-top:66.7%;
	border:1px solid black;
	border-bottom:none;
	box-sizing:border-box;
}
.inewsimg img{
    width: 100%;
	height:100%;
	object-fit:cover;
	position: absolute;
	left:0;
	top:0;
}
.inewscont{
    display: flex;
    flex-direction: column;
    background-color: #eeeeee;
    padding: 20px 20px 30px 20px;
    box-sizing: border-box;
    & span{
        font-size: 16px;
        color: #333333;
    }
    & h4{
        font-size: 18px;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 30px;
        margin: 10px 0 20px;
        height: 60px;
        box-sizing: content-box;
    }
    & p{
        font-size: 14px;
        color: #787878;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 24px;
        height: 48px;
    }
}


.bottom{
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    margin-top: 50px;
    min-height: 300px;
}
.bottom img{
    /* position: absolute; */
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}
.bottomcont{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    & h3{
        font-size: 36px;
        color: white;
    }
    & hr{
        width: 100px;
        height: 1px;
        background-color: white;
        margin: 15px 0;
    }
    & h4{
        font-size: 24px;
        color: white;
		text-align: center;
    }
    & p{
        font-size: 16px;
        color: white;
        text-align: center;
        line-height: 30px;
        margin-top: 30px;
    }
}



/* 底部 */
.footer{
    width: 100%;
    background: url(/images/footerback.png) no-repeat center;
    background-size: cover;
}
.footerall{
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding:0 10px;
    display: flex;
    flex-direction: column;
}
.footertop{
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 30px 0 50px;
}
.footerleft h3{
    font-size: 24px;
    color: white;
}
.footerleft p{
    font-size: 14px;
    color: white;
}
.footerleft img{
    margin-top: 50px;
}
.footercenter{
    display: flex;
    flex: 1;
    justify-content: space-between;
}
.footercenter ul{
    display: flex;
    flex-direction: column;
    line-height: 35px;
	max-width:300px;
}
.footercenter ul h4{
    font-size: 20px;
    color: white;
}
.footercenter ul a{
    font-size: 16px;
    color: white;
}
.footercenter ul li{
    font-size: 16px;
    color: white;
}
.footerright{
    display: flex;
    gap: 30px;
}
.footerright img{
    width: 90px;
    height: 90px;
}
.footerbottom{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: white;
}
.footerbottom a{
    color: white;
}





/* 内页 */
/* 关于我们 */
.about{
    width: 100%;
}
.aboutall{
    width: 100%;
    max-width: 1440px;
    padding: 0 10px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.aboutall h3{
    font-size: 36px;
    font-weight: normal;
    padding-top: 60px;
    text-align: center;
    margin-bottom: 20px;
}
.aboutallimg{
    width: 100%;
    margin-bottom: 20px;
}
.aboutallimg img{
    width: 100%;
    height: auto;
}
.aboutall p{
    margin-bottom: 20px;
    text-indent: 2em;
}

.aboutadv{
    width: 100%;
    max-width: 1440px;
    margin: 50px auto;
    padding: 0 10px;
    box-sizing: border-box;
}
.aboutadv ul{
    width: 100%;
    display: flex;
}
.aboutadv ul li{
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.aboutadv ul li hr{
    width: 100%;
    margin: 30px 0;
}
.aboutadv ul li h3{
    font-size: 18px;
    font-weight: 400;
    color: #666;
}
.aboutadv ul li .numCX{
    font-size: 70px;
    color: #3C4E46;
}
.aboutnumber{
    display: flex;
}
.aboutadv ul li .unit{
    font-size: 20px;
    color: #666;
    margin-left: 5px;
}


.aboutculture{
    width: 100%;
    background: url(/images/aboutculture.jpg) no-repeat bottom;
    background-size: 100% auto;
    padding:100px 10px 30%;
}
.aboutcall{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 10px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: url(/images/about-culture-bg.jpg) no-repeat;
    background-size: 100% 100%;
    border-radius: 30px;
}
.aboutcall h3{
    text-align: center;
    font-size: 32px;
    color: white;
    font-weight: normal;
    padding: 30px 0;
}
.aboutcall ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 20px;
    color: white;
}
.aboutcall ul li{
    position: relative;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0;
    &::after{
        position: absolute;
        content: '';
        width: 2px;
        height: 100%;
        background-color: white;
        right: 0;
        top: 0;
    }
    & h4{
        font-size: 24px;
        font-weight: normal;
		text-align:center;
    }
    & p{
        font-size: 16px;
		text-align:center;
    }
}
.aboutcall ul li:nth-last-child(1){
    &::after{
        position: absolute;
        content: '';
        display: none;
    }
}
.aboutcall ul li hr{
    width: 50px;
    height: 2px;
    background-color: white;
    margin: 10px 0 30px;
}

/* 致辞 */
.zhici{
    width: 100%;
    max-width: 1200px;
    margin:100px auto 30px;
    padding: 30px;
    background-color: #f5f5fa;
    display: flex;
}
.zhicileft{
    width: 40%;
}
.zhicileft p{
    font-size: 16px;
    color: #666;
    line-height: 30px;
    text-indent: 2em;
    margin-top: 20px;
}
.zhiciright{
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: end;
    transform: translateY(-100px);
}
.zhiciright img{
    width: 90%;
    height: 100%;
    object-fit: cover;
}
.zhiciname{
    margin-top: 20px;
}


/* 企业文化 */
.pagehonor{
    width: 100%;
    max-width: 1440px;
    margin: 60px auto;
    padding: 30px 25px 50px;
    background-color: #f4f4f4;
    border-radius: 20px;
}
.pagehonor h3{
    font-size: 30px;
    font-weight: normal;
    text-align: center;
}
.pagehonor h5{
    font-size: 16px;
    color: #595959;
    text-align: center;
    display: block;
    padding: 10px 0 20px;
	font-weight: normal;
}
.pagehonor ul{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(33.33% - 20px),1fr));
    gap: 20px;
}
.pagehonor ul li{
    background: url(/images/honor.jpg) no-repeat left top;
    background-size:100% auto;
    background-color: white;
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 2;
}
.pagehonor ul li h4{
    font-size: 20px;
    color: #333;
}
.pagehonor ul li p{
    font-size: 16px;
    color: #666;
	text-align:center;
}

/* 荣誉 */
.honor{
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: border-box;
}
.honor ul{
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 20px;
}
.honor ul li{
    position: relative;
    width: 100%;
    padding-top: 50%;
    background-color: #013c7b;
}
.honor ul li img{
    position: absolute;
    width:100% ;
    height:100%;
    object-fit: contain;
    left: 0;
    top: 0;
}
.honoritem1{
    grid-column: 1;
    grid-row: 1 / 3;
}


/* 产品 */
.listpro1{
    width: 100%;
    max-width: 1440px;
    padding: 50px 10px;
    margin: 0 auto;
    box-sizing: border-box;
}
.listpro1 ul{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(50% - 20px),1fr));
    gap: 20px;
    margin-top: 35px;
}
.listpro1 ul li{
    position: relative;
    width: 100%;
    padding-top: 66.7%;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, .5);
    transition: all 1.5s;
    overflow: hidden;
}
.listpro1 ul li img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    cursor: pointer;
}
.listpro1 ul li:hover .pro1pa{
    animation: left 1.5s ease forwards;
}
@keyframes left{
    0%{
        left: 100%;
    }
    100%{
        left: 0;
    }
}
.pro1pa{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    top: 0;
    left: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 15px ;
    box-sizing: border-box;
}
.pro1pa p{
    color: white;
    margin-bottom: 10px;
}
.pro1pa h5{
    font-size: 24px;
    color: white;
    margin-bottom: 20px;
}

.pro{
    width: 100%;
    max-width: 1440px;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: border-box;
}
.prolist{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(33.33% - 20px),1fr));
    gap: 20px;
	margin-top:50px;
}
.proitem{
    width: 100%;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.proitemimg{
    position: relative;
    width: 100%;
    padding-top: 66.7%;
    border-bottom: 1px solid black;
}
.proitemimg img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
    padding: 5%;
    transition: all 1s;
}
.proitem:hover .proitemimg img{
    animation: fd 1s ease forwards;
    filter:drop-shadow(0px 10px 5px rgba(0, 0, 0, .5));
}
@keyframes fd {
    0%{
        scale: 1;
    }
    100%{
        scale: 1.3;
    }
}
.prod{
    position: relative;
    line-height: 30px;
    padding: 5%;
}
.prod p{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
	padding-right:35px;
}
.prodimg{
    position: absolute;
    width: 35px;
    height: 10px;
    left: 0;
    top: 50%;
    transform: translate(0%,-50%);
    opacity: 0;
}
.proitem:hover .prodimg{
    animation: right 1s ease forwards;
}
@keyframes right {
    0%{
        left: 0;
        opacity: 0;
    }
    50%{
        left: 50%;
        opacity: 0;
    }
    100%{
        left: calc(95% - 35px);
        opacity: 1;
    }
}

/* 色卡 */
.seka{
    flex: 1;
    margin-left: 7%;
    padding: 30px;
}
.seka h3{
    font-size: clamp(18px, 2vw, 36px);
    font-weight: normal;
    text-align: center;
}
.seka h4{
    font-size: 16px;
    color: #ebebeb;
    text-align: center;
    margin-bottom: 30px;
}
.sekalist{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(25% - 20px),1fr));
    gap: 20px;
}
.sekaimg{
    position: relative;
    width: 100%;
    padding-top: 133.433%;
}
.sekaimg img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
	border: 1px dashed #aaa
}
.sekaitem{
    transition: all 1s;
	cursor: pointer;
}
.sekaitem:hover{
    box-shadow: 0px 0px 15px rgba(0, 0, 0, .5);
}
.sekaitem:hover .prodimg{
    animation: right 1s ease forwards;
}


/* 产品内页 */
.showpro{
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
    margin:50px auto 0;
    box-sizing: border-box;
	display:flex;
}
.showprocont{
	flex: 1;
    margin-left: 7%;
    padding: 30px;
	display:flex;
	flex-direction: column;
}
.showprocont h3{
	font-size:20px;
	font-weight:bold;
	text-align:center;
	margin-bottom:30px;
}
.showprocont img{
	width:auto;
	max-width:100%;
	min-width:50%;
	display:block;
	margin:0 auto;
}




/* 新闻 */
.news{
    width: 100%;
    max-width: 1440px;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: border-box;
}
.newstop{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(45%,1fr));
    gap: 5%;
    margin-top: 50px;
}
.newsleft{
    width: 100%;
}
.newsleft img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.newsright{
    width: 100%;
    /* padding-left: 5%; */
}
.newsa{
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* padding-top: 20px;
    padding-bottom: 40px; */
    padding: 20px 10px 40px;
    border-bottom: 1px solid #c2c2c2;
    transition: all 1s;
}
.newsa:hover{
    box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, .5)
}
.newsh3{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
	font-weight:bold;
}
.newsp{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 24px;
}
.newsimg{
    position: absolute;
    width: 20px;
    height: 20px;
    object-fit: cover;
    transform: translate(0,-50%);
    bottom: 0;
    left: 10px;
}
.newsi{
    position: absolute;
    bottom: -30px;
    transition: bottom 1s linear; /* 添加过渡效果 */
    padding-left: 30px;
  }
  
  .newsa:hover .newsi {
    bottom: 10px; /* 悬停时改变位置 */
  }
  .newslist{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(45%,1fr));
    gap: 5%;
    margin-top: 50px;
  }

.newsh31{
    font-size: 36px;
    font-weight: normal;
    text-align: center;
	margin-top:50px;
}
.newsh41{
    font-size: 16px;
    color: #ebebeb;
    text-align: center;
    margin-bottom: 30px;
}

/* 内页 */
.shownews{
	width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    margin-top: 50px;
}
.shownews h3{
	font-size:24px;
	font-weight:bold;
	text-align:center;
}
.shownewstime{
	font-size:15px;
	color:#a9a9a9;
	text-align:center;
	margin:20px 0;
	display:block;
}
.shownews p{
	font-size:16px;
	margin-bottom:15px;
	line-height:30px;
	color:
}
.shownews img{
	width:100%;
}
.news-next{
	display:flex;
	justify-content: space-between;
	margin:30px 0;
}
.news-next .next a{
	color:#666;
}
.news-next .next a:hover{
	color:#d20104;
}




  /* 案例 */
  .case{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    margin-top: 50px;
  }
  .caselist{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(33.33% - 20px),1fr));
    gap: 20px;
  }
  .caseitem{
    position: relative;
    padding-top: 83.3%;
    transition: all .5s;
    cursor: pointer;
  }
  .caseitem img{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height:calc(100% - 45px) ;
    object-fit: cover;
	border: 1px dashed #c2c2c2;
  }
  .caseitem p{
    background-color: #c2c2c2;
    line-height: 45px;
    text-align: center;
    color: white;
  }
  .caseitem:hover{
    box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, .7);
  }


  /* 遮罩 */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.overlay-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overlay-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border: 3px solid #fff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.image-title {
    color: white;
    font-size: 24px;
    margin-top: 20px;
    text-align: center;
    background: rgba(0,0,0,0.6);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 50px;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 1001;
}

.close-btn:hover {
    transform: scale(1.2);
    color: #ff6b6b;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    cursor: pointer;
    background: rgba(0,0,0,0.5);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    z-index: 1001;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

.overlay-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 18px;
    background: rgba(0,0,0,0.6);
    padding: 5px 15px;
    border-radius: 20px;
}

/* 客户服务 */
.listfuwu{
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 10px;
    /* margin-top: 50px; */
    display: flex;
    justify-content: space-between;
}
.leftnav{
    width: 200px;
}
.leftnavc{
    padding:10px;
    background-color: #eeeeee;
    display: flex;
    flex-direction: column;
}
.leftnavc a{
    line-height: 24px;
    padding-bottom: 5px;
    margin-top: 5px;
    box-sizing: border-box;
    transition: all .5s;
    border-bottom:1px dashed black;
}
.leftnavc a:hover{
    color: #d20104;
    border-bottom:1px solid #d20104;
}
.leftnav h3{
    width: 100%;
    padding: 20px 0;
    background-color: #d20104;
    color: white;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 24px;
}
.leftnav p{
    font-size: 14px;
    line-height: 24px;
}
.leftnav img{
    width: 100%;
    margin: 10px 0;
}
.fuwuall{
    flex: 1;
    margin-left: 7%;
    border: 1px dashed #c2c2c2;
    padding: 30px;
}
.fuwuall h3{
    font-size: 32px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 30px;
}
.fuwuall p{
    line-height: 30px;
    text-align: justify;
    text-indent: 2em;
}
.fuwuall img{
    width: 100%;
    margin: 15px 0;
    border-radius: 10px 10px 15% 10px;
}
.fuwuall a{
    line-height: 30px;
    text-align: justify;
}

/* 安装 */
.anzhuang{
    flex: 1;
    margin-left: 7%;
    padding: 30px;
    padding-top: 0;
}
.anzhuang h3{
    font-size: clamp(18px, 2vw, 36px);
    font-weight: normal;
    text-align: center;
}
.anzhuang h4{
    font-size: 16px;
    color: #ebebeb;
    text-align: center;
    margin-bottom: 30px;
}
.anzhuanglist{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.anzhuangitem{
    width: 100%;
    border: 1px dashed #c2c2c2;
    border-top: 5px solid #d20104;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    transition: all .5s;
    display: flex;
    justify-content: space-between;
    & h5{
        font-size: 20px;
        font-weight: normal;
		display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    & p{
        font-size: 16px;
        color: #aaa;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    &:hover{
        box-shadow: 0px 5px 10px rgba(0, 0, 0, .5);
        border: 1px solid #c2c2c2;
        border-top: 5px solid #d20104;
    }
}
.jgazleft{
    width: 75%;
}
.jgazright{
    width: 20%;
}
.jgazright img{
    width: 100%;
}

.showfwimg{
	width:auto !important;
	display:block;
	margin:30px auto;
}


/* 招聘 */
.listjoin{
    width: 100%;
}
.zhaopin{
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
}
.zhaopin .zp-tit{
    width: 100%;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}
.zhaopin ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #727171;
}
.zhaopin ul:hover{
    background-color: #cccccc;
    transition: 2s;
}
.zhaopin ul li{
    padding:10px 30px;
    box-sizing: content-box;
}
.zhaopin ul li:nth-child(1){
    width: 300px;
}
.zhaopin ul li:nth-child(2){
    width: 35px;
}
.zhaopin ul li:nth-last-child(1){
    width: 65px;
    color: white;
    padding: 15px 40px;
    background-color: #013c7b;
    border-radius: 50px;
    cursor: pointer;
    box-sizing: content-box;
}
.zhaopin ul li p{
    padding: 5px 0;
    font-size: 16px;
}
.zhaopin ul li p span{
    font-weight: bold;
}
.zhaopin ul li p:nth-child(1){
    font-weight: bold;
    font-size: 18px;
}
.zhaopin .fldy{
    width: 70%;
    padding: 20px 0;
}
.zhaopin .fldy p{
    padding: 10px 0;
}
.zhaopin .fldy p:nth-child(1){
    font-size: 24px;
    font-weight: bold;
}
.zhaopin .zpbg{
    font-size: 14px;
    padding-bottom: 50px;
}
.zhaopin .zpbg p{
    padding: 10px 0;
}
.zhaopin .zpbg a{
    color: #224dc5;
    text-decoration: underline;
}

/* 招聘内页 */
.showjoin{
    width: 100%;
    padding: 50px 0;
}
.showjoinall{
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    padding: 50px 30px;
    background-color: #f6f5fb;
}
.showjoinall h3{
    width: 140px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    background-color: #164dae;
    color: white;
    margin-bottom: 30px;
    font-weight: normal;
}
.joinlist{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(50% - 20px),1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.joinitem{
    display: flex;
    flex-direction: column;
}
.joinitem h4{
    font-size: 16px;
    font-weight: normal;
}
.joinitem input{
    border: none;
    border-bottom:1px solid #ccc;
    padding: 5px 0 10px;
    background-color: transparent;
    font-size: 14px;
    color: #e0e0e0;
}
.showjoinall button{
    width: 160px; 
    height: 40px; 
    display: block; 
    margin: 40px auto 0; 
    border: 1px solid #013c7b; 
    color: #013c7b; 
    font-size: 16px; 
    background-color: transparent; 
    border-radius: 20px; 
    transition: all .3s ease; 
    cursor: pointer; 
    outline: none;
    text-align: center;
}
.showjoinall button:hover{
    background-color: #013c7b;
    color: white;
}



/* 联系我们 */
.contact{
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 10px;
    box-sizing: border-box;
}
.contact ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    /* display: grid;
    grid-template-columns: repeat(auto-fill,minmax(calc(50% - 20px),1fr));
    gap: 20px; */
}
.contact ul li{
    position: relative;
    width: 100%;
    padding-top: 40%;
    margin-bottom: 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
}
.contact ul li img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
}
.contactc{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 30px;
}
.contactc p{
    color: white;
    line-height: 30px;
}
.contact ul li:nth-child(2n) .contactc{
    left: 0;
}

/* 在线留言 */
.message{
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 10px;
    box-sizing: border-box;
}
.message form{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.lyitem{
    width: 48%;
    margin-bottom: 20px;
}
.lyitem1{
    width: 100%;
}
.lyitem p{
    font-size:16px;
    margin-left: 20px;
    margin-bottom: 12px;
}
.lyitem input{
    width: 100%;
    height: 50px;
    border: 1px solid #eaeaea;
    padding-left: 20px;
    transition: all .5s;
    box-sizing: border-box;
}
.lyitem input:focus{
    border: 2px solid #d20104;
}
.lyitem textarea{
    width: 100%;
    height: 150px;
    border: 1px solid #eaeaea;
    padding-left: 20px;
    padding-top: 10px;
    transition: all .5s;
    box-sizing: border-box;
}
.lyitem textarea:focus{
    border: 2px solid #d20104;
}
.lybtn{
    padding: 10px 50px;
    margin: 0 auto;
    cursor: pointer;
    transition: all .5s;
    border: 1px solid black;
}
.lybtn:hover{
    background-color: #d20104;
    color: white;
}




  /* 自适应 */
  @media screen and (max-width: 1350px){
    .header{
        padding: 0;
    }
    .iaboutcont{
        width: 85%;
    }
  }
  @media screen and (max-width: 1224px){
    .header .navbar_nav li a{
        padding: 0 20px;
    }

  }
  @media screen and (max-width: 1200px){
    .ibanner{
        margin-top: 100px;
    }
    .iaboutall{
        flex-direction: column;
    }
    .iaboutleft{
        width: 95%;
    }
    .iaboutright{
        display: none;
        width: 100%;
    }
    .iabouta{
        position: unset;
    }
    #wrap{
        height: auto;
    }
    #wrap > ul{
        flex-wrap: wrap;
        height: auto;
        justify-content: space-between;
    }
    #wrap > ul > li.curr{
        flex: 0 0 calc(50% - 15px);
    }
    #wrap > ul > li{
        flex: 0 0 calc(50% - 15px);
    }
    .icasetop{
        width: 100%;
    }
    .footercenter{
        justify-content:flex-end;
    }
    .footercenter ul{
        display: none;
    }
    .footercenter ul:nth-last-child(1){
        display: flex;
    }
  }
  @media screen and (max-width: 849px){
    .footerleft img{
        margin-top: 0;
    }
    .footertop{
        display: grid;
        grid-template-columns: auto auto; /* 两列 */
        grid-template-rows: auto auto; /* 三行 */
    }
    .footercenter {
        grid-column: 2;      /* 第一列 */
        grid-row: 1 / 3;     /* 跨前两行 */
    }
    
    .footertop { grid-column: 1; grid-row: 1; } /* 第二列，第一行 */
    .footerbottom { grid-column: 1; grid-row: 2; } /* 第二列，第二行 */
    }
@media screen and (max-width: 800px){
    .bottomcont{
        width: 100%;
    }
    .bottomcont p{
        margin-top: 10px;
    }
    .fuwuback img{
        position: absolute;
    }
    .bottom img{
        position: absolute;
    }
}
@media screen and (max-width: 546px){
    .footertop{
        display: flex;
        flex-direction: column;
        align-items:flex-start
    }
    .footerleft img{
        display: none;
    }
}


@media screen and (max-width: 1440px){
	.pagehonor ul{
		grid-template-columns: repeat(auto-fill, minmax(calc(50% - 20px), 1fr));
	}
}
@media screen and (max-width: 1400px){
	.aboutcall{
		background-size: auto 100%;
	}
}
@media screen and (max-width: 900px){
	.listpro1 ul{
		grid-template-columns: repeat(auto-fill, minmax(calc(100% - 20px), 1fr));
	}
}
@media screen and (max-width: 800px){
	.pagehonor ul{
		grid-template-columns: repeat(auto-fill, minmax(calc(100% - 20px), 1fr));
	}
	.pagehonor ul li p{
		font-size:12px;
	}
	.caselist{
		grid-template-columns: repeat(auto-fill, minmax(calc(50% - 20px), 1fr));
	}
	.prolist{
		grid-template-columns: repeat(auto-fill, minmax(calc(50% - 20px), 1fr));
	}
	.leftnav{
		display:none;
	}
	.showprocont{
		margin-left:0;
	}
	.seka{
		margin-left:0;
	}
	.fuwuall{
		margin-left:0;
	}
	.anzhuang{
		margin-left:0;
	}
	.sekalist{
		grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 20px), 1fr));
	}
	.newstop{
		grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
	}
	.contactc{
		width:100%;
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(calc(50% - 10px), 1fr));
		gap:10px;
		font-size:12px;
	}
	.contact ul li{
		padding-top:50%;
	}
	.contactc p{
		font-size:12px;
		line-height:18px;
	}
}
@media screen and (max-width: 640px){
	.navitem{
		font-size:11px;
	}
	.aboutcall ul{
		flex-wrap:wrap;
	}
	.aboutcall ul li{
		width:50%;
		padding:50px 0;
		margin-top:15px;
	}
	.aboutcall ul li:nth-child(2)::after{
		display:none;
	}
	.zhici{
		flex-direction: column;
	}
	.zhicileft{
		width:100%;
	}
	.zhiciright{
		width:100%;
		transform: translateY(0);
	}
	.zhiciright img{
		width:100%;
	}
	.sekalist{
		grid-template-columns: repeat(auto-fill, minmax(calc(50% - 20px), 1fr));
	}
}
@media screen and (max-width: 520px){
	.aboutcall ul li h4{
		font-size:18px;
	}
}
@media screen and (max-width: 500px){
	.pro1pa h5{
		font-size:18px;
		margin-bottom: 0px;
	}
	.pro1pa p{
		font-size:14px;
		margin-bottom: 0px;
	}
	.prolist{
		grid-template-columns: repeat(auto-fill, minmax(calc(100% - 20px), 1fr));
	}
	.lyitem{
		width:100%;
	}
	.fuwupa p{
		line-height:1em;
	}
}
@media screen and (max-width: 456px){
	.caselist{
		grid-template-columns: repeat(auto-fill, minmax(calc(100% - 20px), 1fr));
	}
	.sekalist{
		grid-template-columns: repeat(auto-fill, minmax(calc(100% - 20px), 1fr));
	}
}
.aboutadv ul li .numCX {
    font-size: clamp(24px,4vw,70px);
    color: #3C4E46;
}
.caseitem p{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pro1pa h5{
	text-align:center;
}
.pro1pa p{
	text-align:center;
}




/* 翻译 */
.header .navbar_nav li .Japanese{
	padding:0 15px;
	font-size:14px;
}
.header .navbar_nav li .Korean{
	padding:0 15px;
	font-size:14px;
}
.header .navbar_nav li .Russian{
	max-width:150px;
	height:80px;
	line-height:1;
	padding:0 15px;
	font-size:14px;
	display:flex;
	align-items: center;
}

.header .navbar_nav li a.spanish-lang {
    
	height:80px;
	line-height:1;
	padding:0 15px;
	font-size:14px;
	display:flex;
	align-items: center;
  }

.header .navbar_nav li .Hindi{
	padding:0 15px;
	font-size:14px;
}
.header .navbar_nav li .Urdu{
	padding:0 15px;
	font-size:14px;
}

.navall .french-lang{
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 10px), 1fr));
	gap:10px;
}