﻿@charset "utf-8";


.banner{ width:100%; overflow:hidden; position:relative; }
.banner .pic{ width:100%}
.banner .pic img{ width:100%}
.banner .pic .img1{ display:block}
.banner .pic .img2{ display:none}
.banner .item{position: absolute;left: 0; width: 100%; top:50%; transform: translateY(-50%); color: #ffffff; z-index: 3; line-height: 1;}
.banner .item .en{ font-size: 50px; font-weight: bold; color: rgba(255,255,255,0.1); text-transform: uppercase;}
.banner .item .cn{ font-size: 36px; font-weight: bold; color: rgba(255,255,255,1); margin-top: -30px;}

@media (max-width: 1680px){

	.banner .item .en{ font-size: 42px; }
    .banner .item .cn{ font-size: 32px; margin-top: -25px; }

}
@media (max-width: 1200px){

	.banner .item .en{ font-size: 36px; }
    .banner .item .cn{ font-size: 28px; margin-top: -20px; }
}
@media (max-width: 750px){
	.banner .pic .img2{ display:block}
	.banner .pic .img1{ display:none}
	.banner .item .en{ font-size: 28px; }
    .banner .item .cn{ font-size: 20px; margin-top: -16px; }
}





/* 分页 */
.page {  line-height:24px; text-align:center; }
.page select{ display:none}
.page a { display:inline-block; margin:0 2px; padding:0 10px; border:1px solid #d7deef;   color:#333; vertical-align:top; font-size:16px ; min-width:30px; border-radius:0; box-sizing: border-box; line-height: 30px;}
.page a:hover,.page .current { border:1px solid #e7000e; background:#e7000e; color:#fff; }
@media all and (max-width:1200px){
	.page a {  padding:0 10px; font-size:14px }
}
@media all and (max-width:750px){
	.page a{ margin:3px 0}
    .page a {  padding:0 6px; font-size:12px }
}


.proList{ padding: 60px 0; background: #f7f9f9;}
.proListCont{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.proListNav{ width: 310px;}
.proListNav .hd{ background: url(g_18.jpg) center center no-repeat; background-size: cover; display: flex; align-items: center; height: 100px; }
.proListNav .hd i{ display: block; background: url(g_19.png) left center no-repeat; padding-left: 45px; background-size: 29px; font-size: 28px; color: #fff; font-weight: bold; margin-left: 35px; }
.proListNav .bd{ background: #fff; padding: 0 0 20px;}
.proListNav .bd .item{ border-bottom: 1px solid #e7e7e7;}
.proListNav .bd .item  a{ display: flex;  font-size: 18px; color: #222222; height: 60px; align-items: center; padding-left: 30px;}
.proListNav .bd .item .a a{ background: url(g_20.png) calc(100% - 30px) center no-repeat; background-size: 12px;}
.proListNav .bd .item.on .a{ background: #faeeef;}
.proListNav .bd .item.on .a a{  background: url(g_21.png) calc(100% - 30px) center no-repeat; background-size: 12px;  color: #e6222a; font-weight: bold;}
.proListNav .bd .item:hover .a a{  background: url(g_21.png) calc(100% - 30px) center no-repeat; background-size: 12px;  color: #e6222a; font-weight: bold;}
.proListNav .bd .item .b{ display: none;}
.proListNav .bd .item .b a.on{ color: #e6222a;}
.proListNav .bd .item.on .b{ display: block;}

.proListMain{ width: 1300px;}
.proListMain .proSea{ display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; border-bottom: 1px solid #d0d0d0;}
.proListMain .proSea .in{ width: 165px; position: relative;}
.proListMain .proSea .in .inp1{ display: block; width: 100%; height: 50px; font-size: 16px; color: #333; box-sizing: border-box; padding-left: 35px;}
.proListMain .proSea .in .inp1::placeholder{ color: #9c9c9c; opacity: 1; appearance: none; -webkit-appearance: none;}
.proListMain .proSea .in .inp2{ display: block; width: 20px; height: 100%; background: url(g_22.png) center center no-repeat; background-size: 100%; position: absolute; left: 0; top:0; z-index: 2; cursor: pointer;}

.proListMain .proSea .inL{ display: flex; align-items: center;}
.proListMain .proSea .inL .al{ font-size: 24px; color: #e6222a; font-weight: bold; padding-left: 20px; position: relative;}
.proListMain .proSea .inL .al::after{ content: ""; display: block; width: 5px; height: 20px; background: #e6222a; position: absolute; left: 0; top: 55%; transform: translateY(-50%);}
.proListMain .proSea ul{ margin-left: 100px; display: flex;}
.proListMain .proSea ul li a{ display: block; margin-right: 60px; font-size: 20px; color: #333333;}
.proListMain .proSea ul li a.on{ color: #e6222a; font-weight: bold;}
.proListMain .proSea ul li a:hover{ color: #e6222a; font-weight: bold;}


.proListMain .bd{ display: flex; flex-wrap: wrap; margin-top: 45px; margin-bottom: 60px;}
.proListMain .bd .item{ width: 32%; margin-right: 2%; box-sizing: border-box; border:2px solid #f5f5f5; border-radius: 30px; overflow: hidden; padding: 32px 45px; background: #fff; margin-bottom: 35px;}
.proListMain .bd .item:nth-child(3n){ margin-right: 0;}
.proListMain .bd .item:nth-last-child(-n+3){ margin-bottom: 0;}
.proListMain .bd .item:hover{ border-color: #e7000e; box-shadow: 0 0 10px rgba(0,0,0,0.1); background: #fff;}
.proListMain .bd .item .p1{ font-size: 16px; color: #e7000e; line-height: 1; font-weight: bold;}
.proListMain .bd .item .p2{ font-size: 24px; color: #333; line-height: 1.5; margin-top: 15px; }
.proListMain .bd .item .p3{ width: 100%; overflow: hidden; margin: 20px 0;}
.proListMain .bd .item .p3 img{ width: 100%; transition: all 0.5s; transform: scale(1);}
.proListMain .bd .item:hover .p3 img{ transform: scale(1.1);}
.proListMain .bd .item .m{ display: flex; align-items: center; justify-content: center;}
.proListMain .bd .item .m a{ display: flex; align-items: center; justify-content: center; background: #e7000e; margin: 0 10px; font-size: 14px; color: #fff; border-radius: 5px; padding: 10px 25px; cursor: pointer;}
.proListMain .bd .item .m .m2{ background: #66778b;}
@media all and (max-width:1680px){
    .proList{ padding: 50px 0;}
    .proListNav{ width: 210px;}
    .proListNav .hd{ height: 80px; }
    .proListNav .hd i{ padding-left: 35px; background-size: 24px; font-size: 24px; margin-left: 25px; }
    .proListNav .bd{ padding: 0 0 15px;}
    .proListNav .bd .item a{ font-size: 16px; height: 50px; padding-left: 15px; }
    .proListNav .bd .item .a a{  background: url(g_20.png) calc(100% - 15px) center no-repeat; background-size: 10px;  }
    .proListNav .bd .item.on .a a{  background: url(g_21.png) calc(100% - 15px) center no-repeat; background-size: 10px;  color: #e6222a;}
    .proListNav .bd .item:hover .a a{  background: url(g_21.png) calc(100% - 15px) center no-repeat; background-size: 10px;  color: #e6222a;}
    .proListMain{ width: 950px;}
    .proListMain .proSea .in{ width: 150px;}
    .proListMain .proSea .in .inp1{  height: 45px;  font-size: 14px; padding-left: 30px;}
    .proListMain .proSea .in .inp2{ width: 16px; background-size: 16px;}
    .proListMain .bd{ margin-top: 35px; margin-bottom: 50px;}
    .proListMain .bd .item{ border-radius: 20px; padding: 25px 30px;}
    .proListMain .bd .item .p1{ font-size: 14px;}
    .proListMain .bd .item .p2{ font-size: 20px; margin-top: 12px; }
    .proListMain .bd .item .p3{ margin: 16px 0;}
     .proListMain .bd .item .m{ justify-content: space-between;}
    .proListMain .bd .item .m a{ margin: 0 0; font-size: 12px; padding: 10px 20px; }


    .proListMain .proSea .inL .al{ font-size: 20px; padding-left: 18px; }
    .proListMain .proSea .inL .al::after{  width: 4px; height: 18px; }
    .proListMain .proSea ul{ margin-left: 80px;}
    .proListMain .proSea ul li a{ margin-right: 40px; font-size: 16px; }

}
@media all and (max-width:1200px){
    .proList{ padding: 40px 0;}
    .proListNav{ width: 180px;}
    .proListNav .hd{ height: 60px; }
    .proListNav .hd i{ padding-left: 25px; background-size: 18px; font-size: 20px; margin-left: 15px; }
    .proListNav .bd .item a{  font-size: 14px; height: 40px; }
    .proListMain{ width: calc(100% - 200px);}
    .proListMain .proSea .in{ width: 180px;}
    .proListMain .proSea .in .inp1{ height: 45px;  font-size: 14px; padding-left: 26px;}
    .proListMain .proSea .in .inp2{ width: 16px; background-size: 16px;}
    .proListMain .bd{ margin-top: 20px; margin-bottom: 40px;}
    .proListMain .bd .item{ width: 48.5%; margin-right: 3%; border-radius: 10px; padding: 20px; margin-bottom: 20px;}
    .proListMain .bd .item:nth-child(3n){ margin-right: 3%;}
    .proListMain .bd .item:nth-child(2n){ margin-right: 0;}
    .proListMain .bd .item:nth-last-child(-n+3){ margin-bottom: 20px;}
    .proListMain .bd .item:nth-last-child(-n+2){ margin-bottom: 0;}
    .proListMain .bd .item .p1{ font-size: 12px;}
    .proListMain .bd .item .p2{ font-size: 20px; margin-top: 10px; }
    .proListMain .bd .item .p3{ margin: 12px 0;}
    .proListMain .bd .item .m a{ width: 48.5%; box-sizing: border-box; font-size: 12px; padding: 8px 0; }
    .proListMain .proSea .inL .al{ font-size: 18px; padding-left: 16px; }
    .proListMain .proSea .inL .al::after{  width: 2px; height: 16px; }
    .proListMain .proSea ul{ margin-left: 30px;}
    .proListMain .proSea ul li a{ margin-right: 20px; font-size: 14px; }

    
}
@media all and (max-width:750px){
    .proList{ padding: 40px 0;}
    .proListNav{ width: 100%; padding: 60px 0 0;}
    .proListNav .hd{ height: 60px; display: none; }
    .proListNav .hd i{ padding-left: 25px; background-size: 18px; font-size: 20px; margin-left: 15px; }
    .proListNav .bd .item a{  font-size: 14px; height: 40px; }
    .proListMain{ width: 100%; margin-top: 10px;}
    .proListMain .proSea .in{ width: 100%;}
    .proListMain .proSea .in .inp1{ height: 45px;  font-size: 14px; padding-left: 26px;}
    .proListMain .proSea .in .inp2{ width: 16px; background-size: 16px;}
    .proListMain .bd{ margin-top: 20px; margin-bottom: 40px;}
    .proListMain .bd .item{ width: 100%; margin-right: 0; border-radius: 10px; padding: 20px; margin-bottom: 20px;}
    .proListMain .bd .item:nth-child(3n){ margin-right: 0;}
    .proListMain .bd .item:nth-child(2n){ margin-right: 0;}
    .proListMain .bd .item:nth-last-child(-n+3){ margin-bottom: 20px;}
    .proListMain .bd .item:nth-last-child(-n+2){ margin-bottom: 20px;}
    .proListMain .bd .item:nth-last-child(-n+1){ margin-bottom: 0;}
    .proListMain .bd .item .p1{ font-size: 12px;}
    .proListMain .bd .item .p2{ font-size: 20px; margin-top: 10px; }
    .proListMain .bd .item .p3{ margin: 12px 0;}
    .proListMain .bd .item .m a{ width: 48.5%; box-sizing: border-box; font-size: 12px; padding: 8px 0; }
    .proListCont{ position: relative;}
    .proListMain .proSea .in{ position: absolute; width: 100%; left: 0; top: 0; border-bottom: 1px solid #d0d0d0;}
    .proListMain .proSea .inL .al{ display: none;}
    .proListMain .proSea{ border-bottom: 0;}
    .proListMain .proSea .inL{ width: 100%; margin-top: 10px; justify-content: start;}
    .proListMain .proSea ul{ margin-left: 0;}

}

.proDis{ background: url(g_24.jpg) top center no-repeat; background-size: 100%; padding: 100px 0;}
.proDis .nr{ width: 1400px;}
.proDis01{ display: flex; align-items: center; justify-content: space-between;}
.proDis01 .back{ display: flex; align-items: center; justify-content: center; background: #e6222a; padding: 8px 10px; border-radius: 5px;}
.proDis01 .back i{ display: block; background: url(g_25.png) left center no-repeat; background-size: 17px; padding-left: 25px; font-size: 16px; color: #fff;}
.proDis01 .location{ display: flex; align-items: center;}
.proDis01 .location a{ display: block; background: url(g_27.png) left center no-repeat; background-size: 5px; padding-left: 18px; font-size: 16px; color: #666666; margin-left: 14px;}
.proDis01 .location a.home{ background: url(g_26.png) left center no-repeat; background-size: 18px; padding-left: 28px; margin-left: 0;}
.proDis01 .location a:hover{ color: #e6222a;}
.proDis .ibd{ background: #fff; box-sizing: border-box; overflow: hidden; margin-top: 30px; padding:30px 50px ;}
.proDis02{ position: relative; display: flex; align-items: flex-start; justify-content: space-between;}
.proDis02 .swiper01{ width: 78px; position: relative; margin-top: 22px; height: 380px; overflow: hidden;}
.proDis02 .swiper01 .swiper-slide .pic{ width: 100%; box-sizing: border-box; height: 100%; border: 1px solid #ededed; border-radius: 5px; overflow: hidden;}
.proDis02 .swiper01 .swiper-slide .pic img{ width: 100%; height: 100%;}
.proDis02 .swiper01 .swiper-slide.swiper-slide-thumb-active .pic{  border: 1px solid #e7000e;}
.proDis02 .swiper02{ width: 1195px; overflow: hidden;}
.proDis02 .swiper02 .swiper-slide{ width: 100%; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row-reverse;}
.proDis02 .swiper02 .swiper-slide .rt{ width: 522px; box-sizing: border-box; border:1px solid #ededed; border-radius: 10px; overflow: hidden; position: relative;}
.proDis02 .swiper02 .swiper-slide .rt .pic{ width: 100%;}
.proDis02 .swiper02 .swiper-slide .rt .pic  img{ width: 100%; transform: scale(1); transition: all 0.3s;}
.proDis02 .swiper02 .swiper-slide .rt .pic:hover img{ transform: scale(1.1);}
.proDis02 .swiper02 .swiper-slide .rt .cont{ width: 100%; box-sizing: border-box; padding:5px 20px; position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.proDis02 .swiper02 .swiper-slide .rt .cont .n1 .p1{ font-size: 16px; color: #343843;}
.proDis02 .swiper02 .swiper-slide .rt .cont .n1 .p2{ font-size: 20px; color: #31333d; font-weight: bold;}
.proDis02 .swiper02 .swiper-slide .rt .cont .n2{ font-size: 24px; color: #e7000e; font-weight: bold;}
.proDis02 .swiper02 .swiper-slide .rt .cont .n2 i{ font-size: 18px;}
.proDis02 .swiper02 .swiper-slide .intro{ font-size: 16px; color: #333333; line-height: 2; margin: 70px 0 60px;}

.proDis02 .title{ font-size: 32px; color: #333333; font-weight: bold; line-height: 1; position: absolute; left: 0; top: 20px; z-index: 2;}
.proDis02 .more{  position: absolute; left: 0; bottom: 0; z-index: 2;}
.proDis02 .more a{ display: flex; align-items: center; justify-content: center; height: 42px; background: #e6222a; color: #fff; padding: 0 25px; border-radius: 5px; font-size: 16px; width: fit-content;}
.proDis02 .prev02{ width: 78px; height: 9px; background: url(aa1.png) center center no-repeat; transform: rotate(180deg); background-size: auto 100%; cursor: pointer; position: absolute; right: 0; top: 0;}
.proDis02 .prev02:hover{ background: url(aa2.png) center center no-repeat; background-size: auto 100%; transform: rotate(0);}
.proDis02 .next02{ width: 78px; height: 9px; background: url(aa1.png) center center no-repeat; background-size: auto 100%; cursor: pointer; position: absolute; right: 0; bottom: 0;}
.proDis02 .next02:hover{ background: url(aa2.png) center center no-repeat; background-size: auto 100%; transform: rotate(180deg);}



.proDis03{ margin-top: 50px;}
.proDis03 .hd{ border-bottom: 1px solid #e5e5e5;}
.proDis03 .hd .title{ font-size: 32px; color: #333; font-weight: bold; padding:0 0 20px 0; position: relative;}
.proDis03 .hd .title::after{ content: ""; display: block; width:30px; height: 3px; background: #e6222a; position: absolute; left: 0; bottom: -1px;}
.proDis03 .bd{ margin-top: 25px; font-size: 16px; color: #333333; line-height: 2;}
/* --- 现有代码基础上的补充与优化 --- */

@media all and (max-width:1680px){
    .proDis .nr{ width: 1200px;}
    .proDis{ padding: 80px 0; }
    .proDis .ibd{ padding: 25px 30px; }
    
    .proDis03 .hd .title{ font-size: 28px; }

    .proDis02 .swiper01{ width: 70px; margin-top: 20px; height: 323px;}
    .proDis02 .swiper02{ width: 1050px; }
    .proDis02 .swiper02 .swiper-slide .rt{ width: 450px; }
    .proDis02 .swiper02 .swiper-slide .rt .cont .n1 .p1{ font-size: 12px; }
    .proDis02 .swiper02 .swiper-slide .rt .cont .n1 .p2{ font-size: 16px; }
    .proDis02 .swiper02 .swiper-slide .rt .cont .n2{ font-size: 20px; }
    .proDis02 .swiper02 .swiper-slide .rt .cont .n2 i{ font-size: 14px;}
    .proDis02 .swiper02 .swiper-slide .intro{ font-size: 14px; margin: 60px 0 0;}

    .proDis02 .title{ font-size: 28px; top: 10px; }
    .proDis02 .more a{ height: 36px; padding: 0 20px; font-size: 14px;}
    .proDis02 .prev02{ width: 70px;}
    .proDis02 .next02{ width: 70px;}
}

@media all and (max-width:1200px){
    .proDis .nr{ width: 92%;}
    .proDis{ padding: 60px 0; }
    .proDis .ibd{ padding: 20px; margin-top: 20px; }
    
    /* 调整返回按钮和面包屑导航 */
    .proDis01 .back i{ font-size: 14px; padding-left: 20px; background-size: 14px; }
    .proDis01 .location a{ font-size: 14px; padding-left: 15px; background-size: 4px; margin-left: 10px; }
    .proDis01 .location a.home{ padding-left: 22px; background-size: 15px; }

    .proDis02 .swiper01{ width: 0; height: 0%; overflow: hidden; position: absolute; right: 0; top: 0;}
    .proDis02{ display: block;}
    .proDis02 .swiper02{ width: 100%; margin-top: 20px; }
    .proDis02 .swiper02 .swiper-slide{ display: block;}
    .proDis02 .swiper02 .swiper-slide .rt{ width: 100%; }
    .proDis02 .swiper02 .swiper-slide .rt .cont{ padding: 5px 10px;}
    .proDis02 .swiper02 .swiper-slide .rt .cont .n1 .p1{ font-size: 12px; }
    .proDis02 .swiper02 .swiper-slide .rt .cont .n1 .p2{ font-size: 14px; }
    .proDis02 .swiper02 .swiper-slide .rt .cont .n2{ font-size: 18px; }
    .proDis02 .swiper02 .swiper-slide .rt .cont .n2 i{ font-size: 12px;}
    .proDis02 .swiper02 .swiper-slide .intro{ font-size: 14px; margin: 15px 0 0; height: auto; min-height: 1px; width: 100%;}

    .proDis02 .title{ font-size: 20px; top: 0; position: relative; }
    .proDis02 .more{ position: relative;}
    .proDis02 .more a{ height: 32px; padding: 0 16px; font-size: 12px;}
    .proDis02 .prev02{ width: 12px; height: 12px; background-size:100%; transform: rotate(90deg); bottom: 0; right: 20px; top: auto; z-index: 99;}
    .proDis02 .next02{ width: 12px; height: 12px; background-size:100%; transform: rotate(-90deg); z-index: 99; }

    .proDis02 .prev02:hover{ background-size:100%; transform: rotate(-90deg);  }
    .proDis02 .next02:hover{  background-size:100%; transform: rotate(90deg); }


    /* 产品详情下半部分 */
    .proDis03{ margin-top: 40px; }
    .proDis03 .hd .title{ font-size: 24px; padding-bottom: 15px; }
    .proDis03 .bd{ font-size: 14px; margin-top: 20px; }
}

@media all and (max-width:750px){
    .proDis{ padding: 40px 0; background-size: cover; }
    .proDis .nr{ width: 100%; padding: 0 15px; box-sizing: border-box; }
    .proDis .ibd{ padding: 15px; margin-top: 15px; border-radius: 8px; }

    /* 顶部导航堆叠 */
    .proDis01{ flex-direction: column; align-items: flex-start; }
    .proDis01 .back{ margin-bottom: 15px; }
    .proDis01 .location{ width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
    .proDis01 .location a{ font-size: 12px; }



    /* 产品详情下半部分 */
    .proDis03{ margin-top: 30px; }
    .proDis03 .hd .title{ font-size: 18px; padding-bottom: 12px; }
    .proDis03 .hd .title::after{ width: 20px; height: 2px; }
    .proDis03 .bd{ font-size: 13px; margin-top: 15px; line-height: 1.8; }
    

}

.apicList{ padding: 100px 0;}
.apicList .ihd .title{ margin-top: 0;}
.apicListCont{ margin-top: 60px;}
.apicListCont{ display: flex; flex-wrap: wrap; align-items: flex-start;}
.apicListCont .item{ width: calc(400 / 1680 * 100%); margin-right: calc(80 / 3 / 1680 * 100% ); margin-bottom: 60px;}
.apicListCont .item:nth-child(4n){ margin-right: 0;}
.apicListCont .item .pic{ width: 100%; overflow: hidden;}
.apicListCont .item .pic img{ width: 100%; transform: scale(1); transition: all 0.3s;}
.apicListCont .item:hover .pic img{ transform: scale(1.1);}
.apicListCont .item .title{ height: 72px; border-bottom: 2px solid #e5e5e5; display: flex; align-items: center; box-sizing: border-box; padding-right: 60px; background: url(g_29.png) right center no-repeat; background-size: 30px; font-size: 18px; color: #333333; position: relative;}
.apicListCont .item .title::after{ content: ""; display: block; width: 0; height: 2px; background: #e6222a; position: absolute; left: 0; bottom: -2px; transition: all 0.5s;}
.apicListCont .item:hover .title::after{ width: 100%;}
.apicListCont .item:hover .title{  background: url(g_30.png) right center no-repeat; background-size: 30px; }
@media all and (max-width:1680px){
    .apicList{ padding: 80px 0;}
    .apicListCont{ margin-top: 50px;}
    /* 保持4列，但稍微减小间距 */
    .apicListCont .item{ width: calc(25% - 20px); margin-right: 20px; margin-bottom: 50px;}
    .apicListCont .item:nth-child(4n){ margin-right: 0;}

    
    .apicListCont .item .title{ height: 60px; font-size: 16px; padding-right: 50px; background-size: 25px;}
}

@media all and (max-width:1200px){
    .apicList{ padding: 60px 0;}
    .apicListCont{ margin-top: 40px;}
    .apicListCont .item{ width: calc(33.333% - 20px); margin-right: 20px; margin-bottom: 40px;}
    .apicListCont .item:nth-child(4n){ margin-right: 20px;}
    .apicListCont .item:nth-child(3n){ margin-right: 0;} 


    .apicListCont .item .title{ height: 55px; font-size: 15px; padding-right: 45px; background-size: 22px;}
}

@media all and (max-width:750px){
    .apicList{ padding: 40px 0;}
    .apicListCont{ margin-top: 30px;}
    
    /* 改为1列布局 */
    .apicListCont .item{ width: 48.5%; margin-right: 3%; margin-bottom: 20px;}
    .apicListCont .item:nth-child(4n){ margin-right:  3%;}
    .apicListCont .item:nth-child(3n){ margin-right:  3%;}
    .apicListCont .item:nth-child(2n){ margin-right: 0;}
    .apicListCont .item .title{ 
        height: 50px; 
        font-size: 14px; 
        padding-right: 40px; 
        background-size: 20px;
        border-bottom: 1px solid #e5e5e5; /* 边框变细 */
    }
    .apicListCont .item .title::after{ height: 1px; bottom: -1px; } /* 下划线变细 */
}
@media all and (max-width:450px){
     .apicListCont .item{ width: 100%; margin-right: 0%; margin-bottom: 20px;}
        .apicListCont .item:nth-child(4n){ margin-right:  0%;}
        .apicListCont .item:nth-child(3n){ margin-right:  0%;}
        .apicListCont .item:nth-child(2n){ margin-right: 0;}
}





.about01{ background: url(g_31.jpg) center center no-repeat; background-size: cover; padding: 100px 0;}
.about01 .ihd .intro{ width: 90%;}
.about01 .ibd{ margin-top: 70px; display: flex; justify-content:space-between; align-items: flex-start;}
.about01 .ibd .item .p1{ display: flex; align-items: center;}
.about01 .ibd .item .p1 .ico{ width: 45px;}
.about01 .ibd .item .p1 .ico img{ height: 32px; display: block;}
.about01 .ibd .item .p1 .t{ font-size: 18px; color: #444444;}
.about01 .ibd .item .p2{ padding: 20px 0 0 45px; font-size: 60px; color: #e7000e; font-weight: bold; line-height: 1;}
.about01 .btn { width: 100px; margin: 0 auto; position: relative; z-index: 1; margin-top: 60px;}
.about01 .btn img {position: relative;z-index: 2; width: 100%; background: #fff; border-radius: 50%;}
.about01 .btn:after {content: ""; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color:rgba(231,0,14,0.5);border-radius: 50%;width: 70%;height: 70%;animation: myfirstzx 1.5s linear infinite; z-index: -1;}
@media only screen and (max-width:1680px){
    .about01{ padding: 80px 0;}
    .about01 .ihd .intro{ width: 100%;}
    .about01 .ibd{ margin-top: 50px; justify-content: space-between;}
    .about01 .ibd .item .p1 .ico{ width: 40px;}
    .about01 .ibd .item .p1 .ico img{ height: 24px;}
    .about01 .ibd .item .p1 .t{ font-size: 16px;}
    .about01 .ibd .item .p2{ padding: 20px 0 0 40px; font-size: 48px;}
    .about01 .btn { width: 80px; margin-top: 40px;}

}
@media only screen and (max-width:1200px){
    .about01{ padding: 60px 0;}
    .about01 .ibd{ margin-top: 40px;}
    .about01 .ibd .item .p1 .ico{ width: 30px;}
    .about01 .ibd .item .p1 .ico img{ height: 20px;}
    .about01 .ibd .item .p1 .t{ font-size: 14px;}
    .about01 .ibd .item .p2{ padding: 16px 0 0 30px; font-size: 36px;}
    .about01 .btn { width: 60px; margin-top: 40px;}
}
@media only screen and (max-width:750px){
    .about01{ padding: 40px 0;}
    .about01 .ibd{ margin-top: 0; flex-wrap: wrap; padding-top: 20px;}
    .about01 .ibd .item{ width: 50%; margin-top: 20px;}
    .about01 .ibd .item .p1 .ico{ width: 25px;}
    .about01 .ibd .item .p1 .ico img{ height: 16px;}
    .about01 .ibd .item .p1 .t{ font-size: 14px;}
    .about01 .ibd .item .p2{ padding: 5px 0 0 25px; font-size: 28px;}
}







@keyframes myfirstzx {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }

    50% {
      transform: translate(-50%, -50%) scale(2);
      opacity: 0.8;
    }

    100% {
      transform: translate(-50%, -50%) scale(2.5);
      opacity: 0;
    }
}






.about02{ padding: 100px 0;}
.about02 .ibd{ position: relative; margin-top: 60px;}
.about02 .ibd .swiper02{ width:100%; overflow:hidden}
.about02 .ibd .swiper02 .swiper-slide{ width:calc(393 / 1680 * 100%); margin-right:calc(108 / 3 / 1680 * 100%)}
.about02 .ibd .swiper02 .swiper-slide:last-child{ margin-right:0}
.about02 .ibd .swiper02 .swiper-slide:nth-child(2n){ margin-top:110px}
.about02 .ibd .swiper02 .pic{ width:calc(300 / 393 * 100%); margin:0 auto; position:relative; z-index:2}
.about02 .ibd .swiper02 .pic img{ width:100%}
.about02 .ibd .swiper02 .dz{ width:100%; margin-top:-4%}
.about02 .ibd .swiper02 .dz img{ width:100%}
.about02 .ibd .swiper02 .title{ font-size:16px; color:#e7000e; text-align:center; font-weight:bold; margin-top:10px}
.about02 .ibd .prev02{ width: 44px; height: 44px; border-radius: 50%; background: url(g_32.png) center center no-repeat; background-size:cover; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: absolute; right: 100%; top: 50%; margin-top: -22px; cursor: pointer;}    
.about02 .ibd .next02{ width: 44px; height: 44px; border-radius: 50%; background: url(g_32.png) center center no-repeat; background-size:cover; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: absolute; left: 100%; top: 50%; margin-top: -22px; cursor: pointer; transform: rotate(180deg);}    
.about02 .ibd .prev02:hover{background: url(g_33.png) center center no-repeat; background-size:cover; transform: rotate(180deg);}
.about02 .ibd .next02:hover{background: url(g_33.png) center center no-repeat; background-size:cover; transform: rotate(0);}
@media only screen and (max-width:1680px){
    .about02{ padding: 80px 0;}
    .about02 .ibd{ position: relative; margin-top: 50px;}
    .about02 .ibd .swiper02 .swiper-slide:nth-child(2n){ margin-top: 90px;}

    .about02 .ibd .swiper02 .title{ font-size:14px; margin-top:10px}
    .about02 .ibd .prev02{ width: 38px; height: 38px; margin-top: -19px; }    
    .about02 .ibd .next02{ width: 38px; height: 38px; margin-top: -19px; }    
}
@media only screen and (max-width:1200px){
    .about02{ padding: 60px 0;}
    .about02 .ibd{  margin-top: 40px;}
    .about02 .ibd .swiper02 .swiper-slide{width: 32%; margin-right: 2%; }
    .about02 .ibd .swiper02 .swiper-slide:nth-child(2n){ margin-top: 60px;}
    .about02 .ibd .swiper02 .title{ font-size:12px; margin-top:10px}
    .about02 .ibd .prev02{ width: 32px; height: 32px; margin-top: -16px; right: auto; left: 0; z-index: 2; }    
    .about02 .ibd .next02{ width: 32px; height: 32px; margin-top: -16px;  left: auto; right: 0;  z-index: 2; }    
}
@media only screen and (max-width:750px){
    .about02{ padding: 40px 0;}
    .about02 .ibd{  margin-top: 30px;}
    .about02 .ibd .swiper02 .swiper-slide{width: 48.5%; margin-right: 3%; }
    .about02 .ibd .swiper02 .swiper-slide:nth-child(2n){ margin-top: 30px;}   
}




/* 内容模式 */
.article { padding:60px 0; width:100%; margin:0 auto; box-sizing:border-box; line-height:2; font-size:16px; word-wrap:break-word;  }
.article .hd { margin:0 0 30px; padding:0 0 30px; border-bottom: 1px dotted #ccc; }
.article .hd h1 { color:#333; font-size:28px; text-align:center; font-weight:normal; line-height:1.6 }
.article .hd .titBar { color:rgba(0,0,0,0.6); font-size:16px; text-align:center; margin-top:10px }
.article .bd {  line-height:2; font-size:16px; color:#333 }
.article .bd img{ max-width:100%; height:auto}
.article .bd video{ max-width:100%; height:auto}
.article .ft { margin:30px 0 0;}
.article .ft .nr{ padding:0!important; background:none!important}
.article .ft ul{ border-top:1px dotted #ccc; padding:30px 0 0 0 }
.article .ft ul li { width:100%;  box-sizing:border-box; text-align:left; text-overflow: ellipsis;overflow: hidden;white-space: nowrap; color:#333}
.article .ft ul li a{ color:#333}
.article .ft ul li a:hover{ color:#c8102e}
.nr_pc{ display:block}
.nr_sj{ display:none}
.article .bd video{ max-width:100%; height:auto}
@media all and (max-width:1600px){
	.article { padding:60px 0;}
}
@media all and (max-width:1200px){
	.article { padding:60px 0;}
	.article .hd h1{ font-size:18px}
	.article .hd{ padding-bottom:20px; margin-bottom:20px}
	.article .hd .titBar { font-size:12px}
	.article{ font-size:14px}
	.article .ft{ }
	.article .ft .back{ top:20px}
	.article .ft ul li{ width:100%}
	.article .ihd{ font-size:20px;  padding:5px 0; margin-bottom:20px}
	.nr_pc{ display:none}
	.nr_sj{ display:block}
	.article .ft { margin:20px 0 0; height:auto}
	.article .ft ul{ display:block; height:auto; padding:20px 0 0 0}
	.article .ft ul li { width:100% }
	.article .bd{ font-size:14px; line-height:2}	
}
@media all and (max-width:750px){
    .article { padding:40px 0;}
}



.newsList{ margin: 70px 0;}
.newsListBdCont{ margin-bottom: 70px; display: flex; flex-wrap: wrap; align-items: flex-start;}
.newsListBdCont .item{ width: 508px; margin: 0 38px 70px 0;}
.newsListBdCont .item:nth-child(3n){ margin-right: 0;}
.newsListBdCont .item:nth-last-child(-n+3){ margin-bottom: 0;}
.newsListBdCont .item .cont .title{ font-size: 24px; color: #0e283f; line-height: 40px; overflow: hidden;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.newsListBdCont .item .cont .intro{ font-size: 18px; color: #00203c; line-height: 30px; height: 60px; overflow: hidden;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; margin-top: 20px;}
.newsListBdCont .item .cont .time{ margin-top: 32px; border-top: 1px solid #0e283f; padding-top: 20px; }
.newsListBdCont .item .cont .time i{ display: block;font-size: 14px; color: #0e283f; background: url(g_06x.png) right center no-repeat; background-size: auto 6px;}
.newsListBdCont .item:hover .cont .title{ font-weight: bold;}
@media only screen and (max-width:1600px){
    .newsList{ margin: 60px 0;}  
    .newsListBdCont{ margin-bottom: 60px;}
    .newsListBdCont .item{ width: 32%; margin: 0 2% 4% 0; }
    .newsListBdCont .item .cont .title{ font-size: 20px; line-height: 32px; }
    .newsListBdCont .item .cont .intro{ font-size: 16px;  line-height: 25px; height: 50px;  margin-top: 15px; }
    .newsListBdCont .item .cont .time{ margin-top: 25px; padding-top: 16px;   }
}
@media only screen and (max-width:1200px){
    .newsList{ margin: 40px 0;}  
    .newsListBdCont{ margin-bottom: 40px;}  
    .newsListBdCont .item{ width: 32%; }
    .newsListBdCont .item .cont .title{ font-size: 18px; line-height: 30px;  }
    .newsListBdCont .item .cont .intro{ font-size: 14px;  line-height: 20px; height: 40px;   margin-top: 12px; }
    .newsListBdCont .item .cont .time{ margin-top: 20px; padding-top: 12px;   }
    .newsListBdCont .item .cont .time i{ font-size: 12px; }

}
@media only screen and (max-width:750px){
    
    .newsListBdCont .item{ width: 100%; margin-bottom: 20px; }
    .newsListBdCont .item:nth-child(3n){ margin-right: 0;}
    .newsListBdCont .item:nth-last-child(-n+3){ margin-bottom: 20px;}
    .newsListBdCont .item:last-child{  margin-bottom: 0; }
    .newsListBdCont .item .cont .title{ font-size: 16px; line-height: 1.5;   }
    .newsListBdCont .item .cont .intro{ font-size: 12px;  line-height: 1.5; height: auto; display: block;   margin-top: 10px; }
    .newsListBdCont .item .cont .time{ margin-top: 12px; padding-top: 10px;   }
    .newsListBdCont .item .cont .time i{ font-size: 12px; }

}



/*picx*/
.picx{ padding:110px 0}
.picxList{ width:100%; margin-bottom: 70px;}
.picxList .item{ width:31.5%; float:left; margin-right:2.75%; background:#fff; margin-bottom:40px}
.picxList .item:nth-child(3n){ margin-right:0}
.picxList .item:hover{ box-shadow:0 0 10px rgba(00,0,0,0.15)}
.picxList .item a{}
.picxList .item a .pic{ width:100%; overflow:hidden; position:relative}
.picxList .item a .pic img{ width:100% ;transition:All 0.4s linear;    -webkit-transition:All 0.4s linear;    -moz-transition:All 0.4s linear;    -o-transition:All 0.4s linear;}
.picxList .item:hover a .pic img{transform:scale(1.1);    -webkit-transform:scale(1.1);    -moz-transform:scale(1.1);    -o-transform:scale(1.1);    -ms-transform:scal(1.1);}
.picxList .item a .cont{ padding:20px; background: #f1f1f1;}
.picxList .item a .cont .title{ font-size:18px; color:#282828;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; text-align:center; }
.picxList .item:hover a .cont .title{ color:#fff; background:#c8102e}
.picxList .item:hover a .cont{ color:#fff; background:#c8102e}
@media all and (max-width:1600px){
	.picx{ padding:80px 0}
    .picxList{ width:100%; margin-bottom: 50px;}
	.picxList .item{ margin-bottom:30px}

}
@media all and (max-width:1200px){
	.picx{ padding:60px 0}
    .picxList{ width:100%; margin-bottom: 40px;}
	.picxList .item{ margin-bottom:20px}
	.picx{ padding:40px 0}
	.picxList .item a .cont{ padding:15px}
	.picxList .item a .cont .title{ font-size:16px}	

}
@media all and (max-width:750px){
    .picx{ padding:40px 0}
    .picxList{ width:100%; margin-bottom: 25px;}
	.picxList .item{ width:48.5%;   margin-right:3%;margin-bottom:15px}
	.picxList .item:nth-child(3n){ margin-right:3%}
	.picxList .item:nth-child(2n){ margin-right:0}	
	.picxList .item a .cont{ padding:10px}
	.picxList .item a .cont .title{ font-size:14px;}	

}







.picList{ background: #feffff; padding: 120px 0;}
.picListCont{ padding-bottom: 80px;}
.picListCont .item{ margin-bottom: 40px;}
.picListCont .item:last-child{ margin-bottom: 0;}
.picListCont .item a{ display: flex; align-items: center; background: #edf1f7; flex-wrap: wrap; border-radius: 10px; overflow: hidden;}
.picListCont .item a .pic{ width: 600px; overflow: hidden; border-radius: 10px;}
.picListCont .item a .pic img{ width: 100%; transform: scale(1); transition: all 0.5s;}
.picListCont .item:hover a .pic img{ transform: scale(1.1);}
.picListCont .item a .cont{ width: calc(100% - 600px); box-sizing: border-box; padding: 0 50px;}
.picListCont .item a .cont .time{ width:fit-content; padding: 5px 15px; border-radius: 20px; font-size: 16px; color: #8693b5; border: 1px solid #d2daef; transition: all 0.5s;}
.picListCont .item a .cont .title{font-size: 24px; color: #333333; font-weight: bold; margin-top: 16px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; transition: all 0.5s;}
.picListCont .item a .cont .intro{font-size:18px; color: #666666; margin-top: 20px; line-height: 1.8;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.picListCont .item a .cont .more{ margin-top: 60px; height: 40px; width: 100%; background: url(g_28x.png) left center no-repeat; background-size: auto 100%;}
.picListCont .item:hover a .cont .title{ color: #cc203c;}
@media all and (max-width:1600px){
    .picList{ padding: 90px 0;}
    .picListCont{ padding-bottom: 60px;}
    .picListCont .item{ margin-bottom: 30px;}
    .picListCont .item a .pic{ width: 450px;}
    .picListCont .item a .cont{ width: calc(100% - 450px); padding: 0 40px;}
    .picListCont .item a .cont .time{ font-size: 14px;}
    .picListCont .item a .cont .title{font-size: 20px; margin-top: 12px;}
    .picListCont .item a .cont .intro{font-size:16px; margin-top: 16px;}
    .picListCont .item a .cont .more{ margin-top: 40px; height: 32px;}
}
@media all and (max-width:1200px){
    .picList{ padding: 60px 0;}
    .picListCont{ padding-bottom: 40px;}
    .picListCont .item{ margin-bottom: 20px;}
    .picListCont .item a .pic{ width: 300px;}
    .picListCont .item a .cont{ width: calc(100% - 300px); padding: 0 30px;}
    .picListCont .item a .cont .time{ font-size: 12px; padding: 3px 12px;}
    .picListCont .item a .cont .title{font-size: 18px; margin-top: 10px;}
    .picListCont .item a .cont .intro{font-size:14px; margin-top: 12px;}
    .picListCont .item a .cont .more{ margin-top: 20px; height: 28px;}
}
@media all and (max-width:750px){
    .picList{ padding: 40px 0;}
    .picListCont{ padding-bottom: 40px;}
    .picListCont .item{ margin-bottom: 20px;}
    .picListCont .item a .pic{ width: 100%;}
    .picListCont .item a .cont{ width: 100%; padding:20px;}
    .picListCont .item a .cont .time{ font-size: 12px; padding: 3px 12px;}
    .picListCont .item a .cont .title{font-size: 16px; margin-top: 10px;}
    .picListCont .item a .cont .intro{font-size:12px; margin-top: 12px;}
    .picListCont .item a .cont .more{ margin-top: 20px; height: 24px;}
}


.newsPage{ padding: 10px 0 70px;}
.newsList .item{ border-bottom: 1px dashed #ededed;}
.newsList .item a{ display: flex; align-items: flex-start; justify-content: space-between; font-size: 16px; color: #333; padding: 15px 0;}
.newsList .item a .title{ width: calc(100% - 120px);}
.newsList .item a .time{ color: #666;}
.newsList .item a:hover{ color: #fff; background: #c8102e; padding: 15px;}
.newsList .item a:hover .time{ color: rgba(255,255,255,0.6);}
@media all and (max-width:1200px){
    .newsPage{ padding: 0 0 40px;}
    .newsList .item a{ font-size: 14px;}
    .newsList .item a .title{ width: calc(100% - 100px);}
}








.contact01{ width:100%; padding:80px 0 0 0}
.contact01 .lt{ float:left; width:728px; height:548px; background:#eee; background-size:cover; color:#fff; padding:150px 80px 0; box-sizing:border-box}
.contact01 .lt .title{ font-size:30px; color:#e7000e; font-weight:bold}
.contact01 .lt .intro a{ color:#fff}
.contact01 .lt .intro{ font-size:16px; color:#1f1f1f; line-height:2;  margin-top:50px}
.contact01 .rt{ float:right; width:calc(100% - 728px); height:548px}
.contact01 .rt img{ width:100%; height:100%}
@media (max-width: 1680px){
	.contact01 .lt{ width:50%; height:450px; padding:100px 50px; }
	.contact01 .lt .title{ font-size:28px; }
	.contact01 .lt .intro{ font-size:15px; margin-top:40px}
	.contact01 .rt{ width:50%; height:450px;}
}
@media (max-width: 1200px){
	.contact01{ padding:40px 0 0 0}
	.contact01 .lt{ width:100%; height:auto; padding:25px 20px; }
	.contact01 .lt .title{ font-size:20px;  line-height:1;}
	.contact01 .lt .intro{ font-size:14px; margin-top:20px}
	.contact01 .rt{ width:100%; margin-top:20px;height:50vh;}
}


.contacts03{ margin:100px 0}
.contacts03 .ihd{ font-size:36px; width:fit-content; margin:0 auto; padding: 0 10px; line-height:1; font-weight:bold; color:#1f1f1f }
.contacts03 .ibd{ width:100%; padding-top:40px}


.contacts03 .ibd ul li { float:left; width:48%; margin-right:4%; }
.contacts03 .ibd ul li:nth-child(2n) { margin-right:0; }
.contacts03 .ibd ul li:nth-child(n + 3) { margin-top:35px; }
.contacts03 .ibd ul li .p1 { line-height:40px; font-size:16px; color:#181818; }
.contacts03 .ibd ul li .p1 i { color:#e52b26; }
.contacts03 .ibd ul li .p2 .text { width:100%; height:60px; line-height:60px; border:1px solid #eee; font-size:14px; padding:0 20px; box-sizing: border-box; background:#eee }
.contacts03 .ibd ul li .p2 .textarea { width:100%; height:120px;  border:1px solid #eee; font-size:14px; padding:10px 20px; box-sizing: border-box; background:#eee  }
.contacts03 .ibd ul li.li05 { width:100%; margin-right:0; }
.contacts03 .ibd ul li.li06 { width:100%; margin-right:0; text-align:center; }
.contacts03 .ibd ul li.li06 .btn { display:inline-block; width:40%; height:50px; text-align:center; line-height:50px; font-size:18px; color:#fff; letter-spacing:6px; background:#4f4f4f; margin:0 20px; border-radius:10px; cursor:pointer; }
.contacts03 .ibd ul li.li06 .btn01 { background:#e7000e;  }

@media all and (max-width:1200px){

	.contacts03{ margin:40px 0}
	.contacts03 .ihd{ font-size:24px; line-height:normal; text-align:center}
	.contacts03 .ibd{ width:100%; padding-top:20px;}
	.contacts03 .ibd ul li:nth-child(n + 3) { margin-top:25px; }
	.contacts03 .ibd ul li .p2 .text { height:50px; line-height:50px; }
	.contacts03 .ibd ul li.li06 .btn { width:30%; height:42px; font-size:16px; line-height:42px;margin:0 15px;}

}
@media all and (max-width:750px){
	.contacts03 .ihd{ font-size:17px;}
	.contacts03 .ibd ul li { float:none; width:100%; margin-right:0; }
	.contacts03 .ibd ul li:nth-child(2n) { margin-right:0; }
	.contacts03 .ibd ul li:nth-child(n + 2) { margin-top:16px; }
	.contacts03 .ibd ul li .p1 { line-height:30px; font-size:14px; }
	.contacts03 .ibd ul li .p2 .text { height:40px; line-height:40px; font-size:14px; padding:0 10px;  }
}










































































