body{background: #f4f4f4;}

.banner-jj{position: relative; overflow: hidden;}
.banner-jj .bd ul li img{display: block; width: 100%;}
.banner-jj .hd{position: absolute; width: 100%; bottom: 10px; text-align: center;}
.banner-jj .hd ul li{display: inline-block; cursor: pointer; width: 10px; transition: all 0.5s; height: 10px; background: rgba(0,0,0,0.5); border-radius: 10px;}
.banner-jj .hd ul li.on{background: rgba(255,255,255,0.8); width: 30px;}

.pages{text-align: center; margin-top: 0.3rem; overflow: hidden;}

.weizhi{border-bottom: 1px solid #dedede; width: 80%; margin: auto; margin-top: 0.28rem; height: 35px; line-height: 35px;}
.weizhi h1{float: left; font-size: 23px; border-bottom: 2px solid #3aaee5; color: #3aaee5; height: 34px;}
.weizhi h1 font{float: left; margin-right: 5px;}
.weizhi span{float: right;}

.tab {width: 80%; margin: auto;}
.tab a{float:left; line-height: 40px; padding: 0 25px; margin: 0.3rem 0.3rem 0 0; background: #fff; box-shadow: 0 0 5px #dedede; border-radius: 5px;}
/* 默认悬停效果 */
.tab a:hover {background: #3aaee5; color: #fff;}
/* 激活状态样式 */
.tab a.active {background: #3aaee5;color: #fff;}
.tab a.clickclass{background: #3aaee5;color: #fff;}

.page-jj{width: 80%; background: #fff; margin: auto; margin-top: 30px; overflow: hidden;}
.page-jj .tt{text-align: center; font-size: 30px; line-height: 40px; margin: 20px; border-bottom: 1px dotted #dedede; padding-bottom: 10px;}
.page-jj article{padding: 0 2%; font-size: 18px; line-height: 30px; color: #555;}
.page-jj article img{max-width: 100%;}

.page-jj .number-list{margin: 0.5rem 2%; padding: 0.2rem 0; background: #f9f9f9; overflow: hidden;}
.page-jj .number-list ul li{float: left; border-left: 1px solid #dedede; box-sizing: border-box; color: #666; width: 20%; text-align: center; font-size: 18px;}
.page-jj .number-list ul li:first-child{border-left: 0;}
.page-jj .number-list ul li span{display: block; margin-bottom: 20px; font-size: 25px; color: #3aaee5; }
.page-jj .number-list ul li span b{font-size: 40px; line-height: 60px;}
@media(max-width:1300px){.page-jj .number-list ul li span b{font-size: 30px;}}

.page-pic{width: 80%; margin: auto; padding: 0.2rem; overflow: hidden;}
.page-pic ul li{width: 32%; margin: 0.4rem 2% 0 0; background: #fff; box-shadow: 0 0 5px #dedede; border-radius: 0 0 5px 5px; float: left; overflow: hidden;}
.page-pic ul li:nth-child(3n){margin-right: 0;}
.page-pic ul li span{display: block; cursor: pointer; overflow: hidden; margin: 1px;}
.page-pic ul li span img{width: 100%; height: 3.7rem; display: block; transition: all 0.5s;}
.page-pic ul li span:hover img{transform: scale(1.1);}
.page-pic ul li font{display: block; margin: 10px 20px; font-size: 15px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

/* 弹窗样式 */
.page-pic .modal{display: none; position: fixed; top: 60px; /* 距离顶部60px */ left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 999; }
.page-pic .modal-content{position: relative; max-width: 90%; max-height: calc(100vh - 120px); /* 计算剩余高度 */  margin: 0 auto; text-align: center; top: 50%; transform: translateY(-50%);}
.page-pic .modal-img{max-width: 100%; max-height: calc(100vh - 180px); object-fit: contain;}
.page-pic .close{position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; z-index: 1000;}
.page-pic .arrow{position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 50px; cursor: pointer; padding: 15px; background: rgba(0,0,0,0.3); border-radius: 50%; }
.page-pic .prev{left: 30px; }
.page-pic .next{right: 30px;}
.page-pic .caption{color: white; font-size: 24px; margin-top: 20px;}

.newslist{width: 80%; margin: auto; padding:0 0.2rem 0.2rem 0.2rem; overflow: hidden;}
.newslist ul li{float: left; width: 49%; margin: 0.4rem 2% 0 0; background: #fff; padding: 0.2rem; box-sizing: border-box; border-radius: 5px; overflow: hidden;}
.newslist ul li:nth-child(2n){margin-right: 0;}
.newslist ul li:hover{box-shadow: 0 0 5px #dedede;}
.newslist ul li .tu{float: left; width: 40%; float: left; padding: 1px; border: 1px solid #dedede; box-sizing: border-box; overflow: hidden;}
.newslist ul li .tu img{display: block; width: 100%; height: 2rem; transition: all 0.5s;}
.newslist ul li:hover .tu img{transform: scale(1.1);}
.newslist ul li dl{float: right; width: 57%; text-align: justify; overflow: hidden;}
.newslist ul li dl dt{line-height: 0.5rem; overflow: hidden;}
.newslist ul li dl dt a{display: block; float: left; max-width: 100%; font-size: 25px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.newslist ul li dl dd{margin-top: 0.2; color: #666; line-height: 0.3rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}
.newslist ul li dl .xq{float: right; font-size: 12px; color: #666;}
.newslist ul li dl .xq:hover{color: #3aaee5;}

.news{width: 80%; background: #fff; box-shadow: 0 0 5px #dedede; margin: auto; padding: ; margin-top: 0.3rem; overflow: hidden;}
.news .tt{text-align: center; font-size: 30px; line-height: 40px; margin: 0.3rem 20px 0 20px;}
.news .date{ border-bottom: 1px dotted #dedede; padding-bottom: 10px; margin:0 20px 20px 20px; text-align: center; font-size: 12px; color: #666;}
.news article{padding: 0 2%; font-size: 18px; line-height: 30px; color: #555;}
.news article img{max-width: 100%;}
.news .page{margin: 20px 2%; border-top: 1px dotted #dedede; padding-top: 10px; overflow: hidden;}
.news .page span{float: left; max-width: 50%; overflow: hidden;}
.news .page span a{float: right; max-width: 70%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.news .page span:last-child{float: right;}

.productlist{width: 80%; margin: auto; padding:0 0.2rem 0.2rem 0.2rem; overflow: hidden;}
.productlist ul li{width: 32%; margin: 0.4rem 2% 0 0; background: #fff; box-shadow: 0 0 5px #dedede; border-radius: 0 0 5px 5px; float: left; overflow: hidden;}
.productlist ul li:nth-child(3n){margin-right: 0;}
.productlist ul li span{display: block; cursor: pointer; overflow: hidden; margin: 1px;}
.productlist ul li span img{width: 100%; height: 3.7rem; display: block; transition: all 0.5s;}
.productlist ul li span:hover img{transform: scale(1.1);}
.productlist ul li font{display: block; margin: 10px 20px; font-size: 15px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.product{width: 80%; margin: auto; margin-top: 0.4rem; background: #fff; padding: 0.3rem 1.5%; box-sizing: border-box; background: #fff; overflow: hidden;}
.product .pic{float: left; width: 65%; overflow: hidden;}
.product .pic img{display: block; width: 100%;}
.product .rt{width: 30%; float: right; overflow: hidden;}
.product .rt h4{margin-bottom: 30px; font-size: 30px; line-height: 40px; padding: 10px; border-bottom: 1px dotted #dedede; overflow: hidden;}
.product .rt p{margin-top: 10px; line-height: 30px; font-size: 16px; overflow: hidden;}
.product .rt p font{float: left; width: 50px;}
.product .rt p span{float: left; width: calc(100% - 50px); overflow: hidden;}
.product .tt{margin-top: 0.4rem; background: url(../img/main04.png) no-repeat center; text-align: center; font-size: 25px; line-height: 30px; margin-top: 30px;}
.product article{font-size: 18px; line-height: 30px; margin-top: 0.2rem; overflow: hidden;}
.product article img{max-width: 100%;}

@media (max-width:1200px){
	.banner-jj .hd{bottom: 0.5rem;}
	.banner-jj .hd ul li{width: 0.5rem; height: 0.5rem; border-radius: 0.5rem;}
	.banner-jj .hd ul li.on{width: 1rem;}
	
	.weizhi{width: 96%; height: 1.5rem; font-size: 0.8rem; line-height:1.5rem;}
	.weizhi h1{float: left; font-size: 1.2rem; height: 1.5rem;}
	.weizhi h1 font{margin-right: 0.3rem;}
	
	.tab {width: 100%;}
	.tab a{line-height: 2rem; font-size:1rem ; text-align: center; padding: 0; width: 47%; margin: 0.3rem 0 0 2%;}
	
	.page-jj{width: 96%; margin-top: 1rem;}
	.page-jj .tt{font-size: 1.2rem; line-height: 2rem; margin: 0.5rem; padding-bottom: 0.2rem;}
	.page-jj article{padding: 0 2%; font-size: 0.8rem; line-height: 1.5rem;}
	
	.page-jj .number-list{margin: 0.5rem 0 0 0 0; padding: 0.2rem 0;}
	.page-jj .number-list ul li{ width: 50%; font-size: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid #dedede;}
	.page-jj .number-list ul li:nth-child(2n-1){border-left: 0;}
	.page-jj .number-list ul li:last-child{width: 100%; border: 0;}
	.page-jj .number-list ul li span{margin-bottom: 0.5rem; font-size: 1rem;}
	.page-jj .number-list ul li span b{font-size: 2rem; line-height: 3rem;}
	
	.page-pic{width: 100%; padding:0 0 0.2rem 0;}
	.page-pic ul li{width: 45.5%; margin: 0.6rem 0 0 3%;}
	.page-pic ul li span img{width: 100%; height: 6.018519rem;}
	.page-pic ul li font{margin: 0.3rem 0.5rem; font-size: 0.8rem;}
	
	/* 弹窗样式 */
	.page-pic .modal{top: 2.5rem;}
	.page-pic .modal-content{max-height: calc(100vh - 2.5rem);}
	.page-pic .modal-img{max-width: 90%; max-height: calc(100vh - 3rem);}
	.page-pic .close{top: 0.5rem; right: 0.5rem; font-size: 2rem;}
	.page-pic .arrow{ font-size: 1.2rem; padding:3rem 0.5rem;}
	.page-pic .prev{left: 0; }
	.page-pic .next{right: 0;}
	.page-pic .caption{font-size: 0.8rem; margin-top: 0.5rem;}
	
	.newslist{width: 94%; padding:0 3% 0.2rem 3%;}
	.newslist ul li{width: 100%; margin: 0.8rem 0 0 0;}
	.newslist ul li .tu img{height: 5.092593rem;}
	.newslist ul li dl dt{line-height: 1.4rem;}
	.newslist ul li dl dt a{font-size: 1rem;}
	.newslist ul li dl dd{margin-top: 0.1rem; line-height: 1.2rem; font-size: 0.6rem; -webkit-line-clamp: 2;}
	.newslist ul li dl .xq{font-size: 0.6rem;}
	
	.news{width: 94%;}
	.news .tt{font-size: 1.2rem; line-height: 2rem; margin: 0.3rem 0.2rem 0 0.2rem;}
	.news .date{padding-bottom: 0.2rem; margin:0 0.3rem 0.2rem 0.3rem; font-size: 0.6rem;}
	.news article{padding: 0 2%; font-size: 0.8rem; line-height: 1.5rem;}
	.news .page{margin: 0.3rem 2%; padding-top: 0.2rem;}
	.news .page span{width: 100%; float: inherit; display: block; font-size: 0.8rem; line-height: 1.5rem;}
	.news .page span a{float: inherit; max-width: 100%;}
	.news .page span:last-child{float: inherit;}
	
	.productlist{width: 100%; padding:0 0 0.2rem 0; overflow: hidden;}
	.productlist ul li{width: 45.5%; margin: 0.6rem 0 0 3%;}
	.productlist ul li span img{width: 100%; height: 6.018519rem;}
	.productlist ul li font{margin: 0.3rem 0.5rem; font-size: 0.8rem;}
	
	.product{width: 96%;}
	.product .pic{width: 100%;}
	.product .rt{width: 100%; font-size: 0.8rem;}
	.product .rt h4{margin-bottom: 0.5rem; font-size: 1.2rem; line-height: 2rem; padding: 0.5rem;}
	.product .rt p{margin-top: 0.5rem; line-height: 1.5rem; font-size: 0.8rem;}
	.product .rt p font{width: 3rem;}
	.product .rt p span{float: left; width: calc(100% - 3rem);}
	.product .tt{font-size: 1.2rem; line-height: 2rem; margin-top: 0.5rem;}
	.product article{font-size: 0.8rem; line-height: 1.5rem;}
}