/*title*/
.section-title { margin-bottom: 40px; text-align: center;}
.section-title h2 { margin-top: 0; margin-bottom: 0px; text-align: center; font-size:40px;color:#1e201f;text-transform:uppercase; font-weight:500}
.section-title p { width:100%; overflow:hidden; margin-top:5px; margin-bottom:30px; float:left; font-size:20px;color:#1e201f; line-height:40px; text-align:center;}
/*num*/
.number_boxbg{box-shadow: 0 2px 20px rgba(0, 0, 0, 0.19); overflow:hidden;border-radius: 10px; }
.container .numberleft{ float:left; width:70%}
.container .numberright{ float:right; background:#efefef; height:150px; padding:0 3%}
.numberlx{ width:250px; line-height:50px; text-align:center; background:var(--webcolor); color:#fff; margin:auto; margin-top:18%; font-size:16px;}
.numberlx a{ color:#fff;}

.number_box{ margin:auto; width:100%;color: #999; position: relative; z-index:2; background:#fff; height:150px; overflow:hidden;}
.number_box:before,
.number_box:after{content: ""; display: table;}
.number_box:after{clear: both;}
.number_box > .number_box_table{display: table; width: 100%; height: 63px; table-layout: fixed; margin-top: 42px;}
.number_box > .number_box_table > ul{display: table-row;}
.number_box > .number_box_table > ul > li{display: table-cell; border-left: 1px solid #ddd; text-align: center; font-size: 14px;}
.number_box > .number_box_table > ul > li:first-child{border-left: none;}
.number_box > .number_box_table > ul > li > div{position: relative; top: -10px; height: 40px;}
.number_box > .number_box_table > ul > li > div > span{font-size: 50px; color:var(--webcolor); font-weight:800}
.number_box > .number_box_table > ul > li > div > sup{font-size: 14px; vertical-align: top; position: relative; top: -1px; color:var(--webcolor);}
.number_box > .number_box_table > ul > li > div > p{ padding-top:10px;}

/*product list*/
.product-list { width:100%; overflow:hidden; margin-top:40px; padding:2% 0}
.product-list  li { float:left;width:23%; margin-right:2%;margin-bottom:30px;cursor: pointer; background:#f8f8f8;}
.product-list  li:nth-child(4n) {margin-right: 0;}
.product-list  li span{ width:100%; line-height:35px;}
.product-list  li .img{ padding:2%; background:#f8f8f8;}
.product-list  li .img img {max-width: 100%;width: 100%;object-fit: cover;transition: transform 0.5s;}
.product-list  li .line {display: block;width: 0;height:6px;background:var(--webcolor);transition: all .5s;-webkit-transition: all .5s;}
.product-list li:hover {box-shadow: 0 2px 20px rgba(0, 0, 0, 0.19);border-bottom: 0;}
.product-list li:hover .line { width: 100%;transition: all .5s;-webkit-transition: all .5s;}
.product-list li .text { text-align:center; line-height:40px;font-size: 17px;}
.common_more{width:200px;height:45px;display: block;line-height:45px;text-align: center;position: relative;font-size: 15px;color: #fff; background:var(--webcolor);z-index: 1;text-transform:uppercase}
.common_more:before{content:'';width: 0;position: absolute;left: 0;bottom: 0;height:45px;background: #117687;transition:all 0.3s ease;z-index: -1}
.common_more:hover{color: #fff;border-color: #fff;}
.common_more:hover:before{width:100%;transition:all 0.3s ease;}

/*advantages*/
.advantages-bg{ width:100%; background:url(/images/ys_bg.jpg) no-repeat center; padding:80px 0;}
.title-en{ width:100%;overflow:hidden; font-size:40px; text-align:center; text-transform:uppercase; color:#fff; font-weight:500}
.jjfa{margin:50px auto auto; width:100%; overflow:hidden;}
.jjfa > li{width: 25%; float: left; display: inline-block; padding: 0 10px; box-sizing: border-box; animation: fadeInRight 1s both;}
.jjfa > li:nth-child(2){animation-delay: .5s;}
.jjfa > li:nth-child(3){animation-delay: 1s;}
.jjfa > li:nth-child(4){animation-delay: 1.5s;}
.jjfa_item{text-align: center; padding: 0 20px; height: 400px; border-radius: 2px; box-sizing: border-box; color: #9e9e9e; position: relative; border: #fff 1px solid; background:#fff;}
.jjfa_item:hover{box-shadow: 0 0 10px rgba(0, 0, 0, .05); border: #f3f3f3 1px solid;}
.jjfa_img01, .jjfa_img02, .jjfa_img03, .jjfa_img04{width: 80px; height: 80px; background: url("/images/jjfa.png") 0 0 no-repeat; margin: 0 auto; margin-top: 50px;}
.jjfa_img01{background-position: 0 0;}
.jjfa_img02{background-position: 0 -80px;}
.jjfa_img03{background-position: 0 -160px;}
.jjfa_img04{background-position: 0 -240px;}
.jjfa_item:hover .jjfa_img01{background-position: -80px 0;}
.jjfa_item:hover .jjfa_img02{background-position: -80px -80px;}
.jjfa_item:hover .jjfa_img03{background-position: -80px -160px;}
.jjfa_item:hover .jjfa_img04{background-position: -80px -240px;}
.jjfa_item h3{font-size: 25px; font-weight: normal; color: #202123; line-height: 60px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.jjfa_item h3:after {display: block; content: ''; width:80px; height: 3px; margin: 10px auto 0; background-color:#b3b1b1;}
.jjfa_item:hover h3:after{background-color:var(--hovercolor);}
.jjfa_text{text-align: left; font-size: 15px; line-height: 28px; height: 90px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: normal !important; margin-top:40px; color:#6d6c6c}
.jjfa_item:hover .jjfa_text{color: #666;}
/*about*/
.container .aboutL{ float:left; overflow:hidden; width:43%}
.container .aboutL video{ width:100%;}
.container .aboutR{ float:right; overflow:hidden;  width:55%; box-sizing: border-box;}
.container .aboutR h3{ float:left; width:100%; font-size:38px; font-weight:500; text-transform:uppercase; overflow:hidden; padding-bottom:1px;}
.container .aboutR h2{ float:left; width:100%; font-size:20px; font-weight:500; overflow:hidden; margin-top:10px;}
.container .aboutR h2:after {display: block; content: ''; width:100px; height: 3px; margin: 10px 0 0 0 ;  background-color:var(--hovercolor);}
.container .aboutR p{float:left; width:100%; line-height:36px; font-size:18px; overflow:hidden; padding:10px 0;}
.about_more{ clear:both;width:250px;height:45px;display: block;line-height:45px;text-align: center;font-size: 15px;color: #fff; background:var(--hovercolor);text-transform:uppercase;}
.about_more:before{content:'';width: 0;height:45px;background:var(--hovercolor);transition:all 0.3s ease;z-index: -1}
.about_more:hover{color: #fff;border-color: #fff;}
.about_more:hover:before{width:100%;transition:all 0.3s ease;}
/*application */
.application-bg{ width:100%; background:url(/images/appl_bg.jpg) no-repeat center; padding:80px 0; overflow:hidden;}
.application-tit{ width:100%; line-height:60px; background:url(/images/line.png) no-repeat center; text-align:center;font-size:40px;color:#1e201f;text-transform:uppercase; font-weight:500}
.application-tit1{ width:100%; line-height:40px; text-align:center; font-size:18px;text-transform:uppercase; color:#818180;}
.container1 { display: flex; margin-top:50px;}
.left-menu {width:450px;}
.menu-item {padding: 15px;cursor: pointer; background-color:#dad7d7;transition: background-color 0.3s ease; border-bottom:1px solid #fff; line-height:100px; font-size:18px;}
.menu-item em{ font-size:45px; font-weight:700; color:#e31d1a; font-style:normal; padding-right:20px;}
.menu-item:hover em{ color:#fff;}
.menu-item:hover {background-color:#e31d1a; color:#fff; }
.right-image {flex: 1; display: flex;justify-content: center;}
.right-image img {max-width: 100%;height: auto;}


.application-list { width:98%; overflow:hidden; margin:auto; margin-top:40px; padding:2% 1%}
.application-list  li { float:left;width:32%; margin-right:2%;margin-bottom:30px;cursor: pointer;box-shadow: 0 2px 20px rgba(0, 0, 0, 0.19); background:#fff}
.application-list  li:nth-child(3n) {margin-right: 0;}
.application-list  li span{ width:100%; line-height:35px;}
.application-list  li .img{ padding:3%; background:#f8f8f8;}
.application-list  li .img img {max-width: 100%;width: 100%;object-fit: cover;transition: transform 0.5s;}

.application-list li .text { text-align:center; line-height:40px;font-size: 17px;}

/*news list*/
.newslist{ width:100%;overflow:hidden; margin-bottom:40px;}
.newslist .left{width:calc(45% - 30px); float:left; padding:15px; background:#f8f8f8;}
.newslist .left .img{ float:left; width:100%; overflow:hidden;}
.newslist .left .img img{ width:100%;}
.newslist .left p{ float:left; width:100%; line-height:30px; padding:10px 0; font-size:16px;} 
.newslist .left span{ float:left; width:100%; color:#a6a5a3;}
.newslist .right{width:54%; float:right;}
.newslist .right li{ float:left; width:calc(100% - 30px); margin-bottom:30px; padding:10px; background:#f8f8f8;}
.newslist .right li p{ float:left; width:100%; line-height:55px; font-size:18px; color:#585756; border-bottom:1px dashed #c8c6c6}
.newslist .right li span{float:left; width:100%; line-height:25px; color:#a6a5a3; padding:10px 0}
.newslist .right li:hover{ background:var(--hovercolor)}
.newslist .right li:hover p,.newslist .right li:hover span{ color:#fff}
/*customer*/
.customer-bg{ width:100%; background:url(/images/customer_bg.jpg) no-repeat center; padding:60px 0; overflow:hidden;}
.customer-title h2 { margin-top: 0; margin-bottom: 20px; text-align: center; font-size:60px;color:#fff;text-transform:uppercase; font-weight:700}

.customer_more{width:200px;height:45px;display: block;line-height:45px;text-align: center;position: relative;font-size: 18px;color:var(--webcolor); background:#fff;z-index: 1;text-transform:uppercase}
.customer_more:before{content:'';width: 0;position: absolute;left: 0;bottom: 0;height:45px;background: #0a6b7c;transition:all 0.3s ease;z-index: -1}
.customer_more:hover{color:#fff;border-color:#0a6b7c;}
.customer_more:hover:before{width:100%;transition:all 0.3s ease;}

@media (max-width:768px) {
/*title*/
.section-title { margin-bottom:20px;margin-top:0; }
.section-title h2 { font-size:25px; font-weight:500}
.section-title p { font-size:14px;line-height:20px;}

/* 本例子css */
.slideGroup .parHd ul li{ width:100%; padding:15px 0;border:1px solid #ccc; margin:0; text-align:center; margin-bottom:15px;}
.slideGroup .parHd ul li.on{ color: #fff; background:#c00; border:1px solid #c00 }

.slideGroup .parBd { width:100%; overflow:hidden; padding:2% 0}
.slideGroup .parBd ul{ overflow:hidden; zoom:1;}
.slideGroup .parBd ul li { float:left;width:48%; margin-right:2%;margin-bottom:20px;}
.slideGroup .parBd ul li:nth-child(2n) {margin-right: 0;}
.slideGroup .parBd ul li:nth-child(3) {margin-right:2%;}
.slideGroup .parBd ul li span{ width:100%; line-height:35px;}

.slideGroup .parBd ul li .text {line-height:25px;font-size: 14px;}


/*num*/
.number_boxbg{ display:none}
.product-list  li {width:48%; margin-right:2%;margin-bottom:20px;}
.product-list  li:nth-child(2n) {margin-right: 0;}
.product-list li .text {line-height:25px;font-size: 14px;}
.juzhong{ display:block}
.nynav{ display:none}
.nynav li{ width:100%;line-height:40px; font-size: 14px; margin: 10px 0; }
.nynav li a{color: #585858; display: block; padding: 0px 10px; text-align:center}

/*advantages*/
.advantages-bg{ background:#2e2e2e; padding:30px 0;}
.title-en{ font-size:25px;font-weight:500}
.jjfa{margin:30px auto auto;}
.jjfa > li{width:100%; margin-bottom:20px;}
.jjfa_item{ padding: 0 10px; height:300px; }
.jjfa_img01, .jjfa_img02, .jjfa_img03, .jjfa_img04{ margin-top:20px;}
.jjfa_item h3{line-height: 60px; font-size:22px;}
.jjfa_text{font-size: 15px; margin-top:20px;}
/*about*/
.container .aboutL{width:100%}
.container .aboutR{ float:left;width:100%; box-sizing: border-box;}
.container .aboutR h3{ display:none}
.container .aboutR h2{font-size:20px; font-weight:500;}
.container .aboutR p{line-height:26px;}
/*application */
.application-bg{padding:30px 0;}
.application-tit{line-height:60px; background:none;font-size:25px;font-weight:500}
.application-tit1{line-height:25px;font-size:14px;}
.container1 { display:none}
.application-list { width:100%; overflow:hidden; margin:auto; margin-top:20px; padding:0}
.application-list  li { float:left;width:100%; margin-right:0px;margin-bottom:20px;}
.application-list  li:nth-child(3n) {margin-right: 0;}
.application-list  li span{ width:100%; line-height:35px;}
.application-list  li .img{ padding:3%; background:#f8f8f8;}
.application-list  li .img img {max-width: 100%;width: 100%;object-fit: cover;transition: transform 0.5s;}
.application-list  li .text{ text-align:center; line-height:25px; font-size:13px; overflow:hidden}

/*news list*/
.newslist .left{width:100%;  padding:10px;}
.newslist .left p{ line-height:25px; } 
.newslist .left span{line-height:25px;}
.newslist .right{width:100%; float:left; margin-top:20px;}
.newslist .right li{ float:left; width:100%; margin-bottom:6px;}
.newslist .right li p{line-height:25px; padding-bottom:10px;}
.newslist .right li span{float:left; width:100%; line-height:25px; color:#a6a5a3; padding:10px 0}
/*customer*/
.customer-bg{padding:30px 0;}
.swiper-container1 {position: relative;overflow: hidden; z-index: 1; height:80px;}

}