@charset 'utf-8';

.banner{position: relative; overflow: hidden;}
.banner .picture{overflow: hidden;}
.banner .picture img{position: relative; left: 50%; transform: translateX(-50%);}
.banner .content{width: 100%; position: absolute; left: 0; top: 260px;}
.banner .content h2{font-size: 58px;}
.banner .content h3{font-size: 38px; margin-top: 10px;}
.banner .content p{width: 510px; font-size: 18px; line-height: 32px; margin-top: 60px;}
.banner .content a{display: inline-block; font-size: 18px; margin-top: 30px;}
.banner .content .text1 h2{color: #fff; text-shadow: 1px 1px 0 #000;}
.banner .content .text1 h3{color: #e4c4a0; text-shadow: 1px 1px 0 #000;}
.banner .content .text1 p{color: #fff; text-shadow: 1px 1px 1px #000;}
.banner .content .text1 a{color: #cdab86; text-shadow: 1px 1px 0 #fff;}
.banner .content .text2 h2{color: #000;}
.banner .content .text2 h3{color: #000;}
.banner .content .text2 p{color: #000; text-shadow: 1px 1px 0 #fff;}
.banner .content .text2 a{color: #000; text-shadow: 1px 1px 0 #fff;}
.banner .content .text3 h2{color: #181818;}
.banner .content .text3 h3{color: #ccaa86;}
.banner .content .text3 p{color: #000; text-shadow: 1px 1px 0 #fff;}
.banner .content .text3 a{color: #ccaa86;}
.banner .swiper-pagination .swiper-pagination-bullet{width: 50px; height: 4px; margin: 0 10px !important; border-radius: 0; background: #fff; opacity: 1; cursor: pointer;}
.banner .swiper-pagination .swiper-pagination-bullet-active{background: #ccaa86;}

.commonTitle{width: 100px; padding-bottom: 16px; border-bottom: solid #dedede 1px; text-align: right;}
.commonTitle h3{font-size: 20px; color: #1f1f1f;}
.commonTitle p{font-size: 10px; color: #818181; margin-top: 5px;}

.hotProduct{padding: 80px 0 100px;}
.hotProduct .productList{margin-top: 35px; display: flex; justify-content: space-between;}
.hotProduct .productList .list{width: 24%; background: #f5f5f5; position: relative; overflow: hidden; transition: all 0.5s;}
.hotProduct .productList .list:first-child::after{content: url("../images/hotlogo.png"); position: absolute; left: 44px; top: 25px;}
.hotProduct .productList .list:hover{width: 27%;}
.hotProduct .productList .list .layer{overflow: hidden; opacity: 0; transition: all 0.5s;}
.hotProduct .productList .list .layer img{position: relative; left: 50%; transform: translateX(-50%);}
.hotProduct .productList .list:hover .layer{opacity: 1;}
.hotProduct .productList .list .picture{width: 100%; position: absolute; top: 130px;}
.hotProduct .productList .list .picture img{width: 100%; transition: all 0.5s;}
.hotProduct .productList .list:hover .picture img{transform: scale(1.2);}
.hotProduct .productList .list .content{position: absolute; left: 30px; bottom: 60px;}
.hotProduct .productList .list .content .title{font-size: 26px; color: #323232;}
.hotProduct .productList .list .content .text{max-width: 180px; font-size: 12px; line-height: 18px; color: #878787; margin-top: 10px;}
.hotProduct .productList .list:hover .content .title{color: #fff;}
.hotProduct .productList .list:hover .content .text{color: #fff;}

.indexProduct{padding: 40px 0 50px; background: url("../images/productbox.jpg") center no-repeat;}
.indexProduct .commonTitle{float: left; border-color: #212020;}
.indexProduct .commonTitle h3,.indexProduct .commonTitle p{color: #151515;}
.indexProduct .productCategory{float: right; margin-top: 26px;}
.indexProduct .productCategory li{float: left; color: #171813; line-height: 36px; padding: 0 20px; cursor: pointer;}
.indexProduct .productCategory li.current{background: #1a1d21; color: #fff; border-radius: 8px;}
.indexProduct .productCategory li:hover{background: #1a1d21; color: #fff; border-radius: 8px;}
.indexProduct .productCategory li:hover a{color: #fff;}

.indexProduct .productBox{margin-top: 50px;}
.indexProduct .productBox .listBox{height: 0; position: relative; overflow: hidden;}
.indexProduct .productBox .listBox.showList{height: auto;}
.indexProduct .productBox .listBox .list{background: #f5f5f5; border-radius: 8px; position: relative; margin: 10px 0;}
.indexProduct .productBox .listBox .list:hover{background-image: url("../images/product_bg.jpg"); background-size: 100% 100%;}
.indexProduct .productBox .listBox .list .picture{overflow: hidden;}
.indexProduct .productBox .listBox .list .picture img{width: 100%;}
.indexProduct .productBox .listBox .list .content{width: 100%; box-sizing: border-box; position: absolute; left: 0; bottom: 0; padding: 0 30px 20px; opacity: 0; transition: all 0.3s;}
.indexProduct .productBox .listBox .list .content .title{font-size: 22px; color: #fff;}
.indexProduct .productBox .listBox .list .content .text{font-size: 12px; color: #fff; padding-right: 30px; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;}
.indexProduct .productBox .listBox .list .content .text::after{content: '→'; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.indexProduct .productBox .listBox .list:hover .content{opacity: 1;}
.indexProduct .productBox .swiper-button-prev,
.indexProduct .productBox .swiper-button-next{width: 60px; height: 60px; margin-top: -30px; background-size: 100% 100%;}
.indexProduct .productBox .swiper-button-prev{left: 0; background-image: url("../images/swiper_left.png");}
.indexProduct .productBox .swiper-button-next{right: 0; background-image: url("../images/swiper_right.png");}

.indexCase{padding-top: 80px;}
.indexCase .caseSwiper{position: relative; overflow: hidden; margin-top: 60px; padding-bottom: 70px;}
.indexCase .caseSwiper img{width: 100%;}
.indexCase .caseSwiper .swiper-pagination-progressbar{width: 80%; height: 3px; top: auto; bottom: 16px; background: #bebebe;}
.indexCase .caseSwiper .swiper-pagination-progressbar-fill{background: #000;}
.indexCase .caseSwiper .swiper-button{width: 20%; position: absolute; bottom: 0; right: 0; text-align: center;}
.indexCase .caseSwiper .swiper-button .swiper-button-prev,
.indexCase .caseSwiper .swiper-button .swiper-button-next{display: inline-block; position: initial; width: auto; line-height: 44px; margin: 0 30px; background: none; font-size: 40px; color: #a9a1a1;}
.indexCase .caseSwiper .swiper-button .swiper-button-prev:hover,
.indexCase .caseSwiper .swiper-button .swiper-button-next:hover{color: #1d1d1d;}

.indexAboutus{padding: 80px 0 68px;}
.indexAboutus .commonTitle{float: left;}
.indexAboutus .aboutusTab{float: right; margin-top: 26px;}
.indexAboutus .aboutusTab li{float: left; color: #222; line-height: 36px; padding: 0 20px; cursor: pointer;}
.indexAboutus .aboutusTab li.current{background: #1a1d21; color: #fff; border-radius: 8px;}
.indexAboutus .aboutusBox{background: url("../images/aboutbg.jpg"); margin-top: 40px; border-radius: 10px;}
.indexAboutus .aboutusBox .aboutList{height: 0; overflow: hidden; position: relative;}
.indexAboutus .aboutusBox .aboutList.showList{height: auto;}
.indexAboutus .aboutusBox .label{font-size: 18px; font-weight: bold; color: #cab093; margin-left: -4px; position: relative;}
.indexAboutus .aboutusBox .label::after{width: 50px; height: 1px; content: ''; background: #cab093; position: absolute; top: 10px; left: 118px;}
.indexAboutus .aboutusBox .company{padding: 40px 35px 40px 70px;}
.indexAboutus .aboutusBox .company .text{width: 46%; float: left;}
.indexAboutus .aboutusBox .company .text .title{font-size: 50px; line-height: 60px; color: #000; font-family: '黑体'; font-weight: bold; margin-top: 10px;}
.indexAboutus .aboutusBox .company .text .subtitle {
  font-size: 30px;
  line-height: 30px;
  font-weight: bold;
  color: #cab093;
  font-family: '黑体';
  margin-top: 20px;
}
.indexAboutus .aboutusBox .company .text .content {
  color: #000;
  line-height: 25px;
  margin-top: 20px;
}
.indexAboutus .aboutusBox .company .text .more{margin-top: 30px;}
.indexAboutus .aboutusBox .company .text .more a{display: block; width: 170px; line-height: 50px; text-align: center; border: solid #353432 1px; border-radius: 25px; color: #000; font-weight: bold;}
.indexAboutus .aboutusBox .company .picture{width: 50%; float: right;}
.indexAboutus .aboutusBox .company .picture img{width: 100%; border-radius: 16px;}
.indexAboutus .aboutusBox .teams{padding: 20px 60px 50px 38px;}
.indexAboutus .aboutusBox .teams .title{font-size: 40px; font-family: '黑体'; color: #000; font-weight: bold; margin-top: 10px;}
.indexAboutus .aboutusBox .swiperBox{margin-top: 20px; padding-right: 80px; position: relative;}
.indexAboutus .aboutusBox .teamsSwiper{overflow: hidden;}
.indexAboutus .aboutusBox .teamsSwiper .swiper-wrapper{margin-top: 50px;}
.indexAboutus .aboutusBox .teamsSwiper .swiper-slide{border: solid #27344d 3px; box-sizing: border-box;}
.indexAboutus .aboutusBox .teamsSwiper .swiper-slide img{width: 100%;}
.indexAboutus .aboutusBox .teamsSwiper .swiper-pagination-progressbar{height: 2px; background: #3f3f3f;}
.indexAboutus .aboutusBox .teamsSwiper .swiper-pagination-progressbar-fill{background: #cab093;}
.indexAboutus .aboutusBox .teamsSwiper .swiper-button-next{width: auto; right: 0; line-height: 44px; background: none; font-size: 60px; color: #a9a1a1;}
.indexAboutus .aboutusBox .teamsSwiper .swiper-button-next:hover{color: #000;}
.indexAboutus .aboutusBox .certificates{padding: 20px 60px 50px 38px;}
.indexAboutus .aboutusBox .certificates .title{font-size: 40px; font-family: '黑体'; color: #000; font-weight: bold; margin-top: 10px;}
.indexAboutus .aboutusBox .certificatesSwiper{overflow: hidden;}
.indexAboutus .aboutusBox .certificatesSwiper .swiper-wrapper{margin-top: 50px;}
.indexAboutus .aboutusBox .certificatesSwiper .swiper-slide{border: solid #27344d 3px; box-sizing: border-box; padding: 30px; background: #fff;}
.indexAboutus .aboutusBox .certificatesSwiper .swiper-slide img{width: 100%;}
.indexAboutus .aboutusBox .certificatesSwiper .swiper-slide p{text-align: center;color: #cab093;border-top: solid #f2f3f5 2px;padding-top: 16px;margin-top: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.indexAboutus .aboutusBox .certificatesSwiper .swiper-pagination-progressbar{height: 2px; background: #3f3f3f;}
.indexAboutus .aboutusBox .certificatesSwiper .swiper-pagination-progressbar-fill{background: #cab093;}
.indexAboutus .aboutusBox .certificatesSwiper .swiper-button-next{width: auto; right: 0; line-height: 44px; background: none; font-size: 60px; color: #a9a1a1;}
.indexAboutus .aboutusBox .certificatesSwiper .swiper-button-next:hover{color: #000;}

.indexNews{padding: 100px 0 130px; background: #f8f7f7;}
.indexNews .commonTitle{float: left;}
.indexNews .more{float: right; font-size: 18px;}
.indexNews .more a{display: block; color: #575656; line-height: 26px;}
.indexNews .more b{display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 16px; border: solid #575656 1px; border-radius: 50%; margin-left: 8px;}
.indexNews .newsList{padding: 80px 0 50px;}
.indexNews .newsList .list{width: 31%; float: left; box-sizing: border-box; padding: 50px 50px 0; background: #fff; border-radius: 16px; margin-right: 3.5%;}
.indexNews .newsList .list:nth-child(3){margin-right: 0;}
.indexNews .newsList .list:hover{background: url("../images/news.jpg"); background-size: 100% 100%;}
.indexNews .newsList .list .date{font-size: 50px; color: #343434;}
.indexNews .newsList .list .year{font-size: 12px; color: #646464;}
.indexNews .newsList .list .title{height: 60px; line-height: 30px; font-size: 18px; color: #cab093; margin-top: 30px; padding-top: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; position: relative;}
.indexNews .newsList .list .title::after{width: 60px; height: 2px; content: ''; background: #f1f1f1; position: absolute; top: 0; right: 0;}
.indexNews .newsList .list .text{height: 48px; line-height: 24px; color: #7b7b7b; margin-top: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.indexNews .newsList .list .picture{margin: 40px 0 -50px; border-radius: 16px; overflow: hidden;}
.indexNews .newsList .list .picture img{width: 100%; transition: all 0.5s;}
.indexNews .newsList .list .picture:hover img{transform: scale(1.1);}
.indexNews .newsList .list:hover .title{color: #fff;}
.indexNews .newsList .list:hover .text{color: #222;}

@media (max-width: 980px) {
	.banner{margin-top: 61px;}
	.banner .picture img{height: 320px;}
	.banner .content{top: 30px;}
	.banner .content h2{font-size: 26px;}
	.banner .content h3{font-size: 20px; margin-top: 10px;}
	.banner .content p{width: auto; font-size: 15px; line-height: 28px; margin-top: 20px;display: none;}
	.banner .content a{font-size: 16px; margin-top: 20px;}
	.banner .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; margin: 0 6px !important; border-radius: 50%;}
	
	.commonTitle{text-align: center; margin: 0 auto;}
	
	.hotProduct{padding: 30px 0;}
	.hotProduct .productList{margin-top: 35px; flex-wrap: wrap;}
	.hotProduct .productList .list{width: 48%; padding: 20px 0; margin-bottom: 30px;}
	.hotProduct .productList .list:first-child::after{display: none;}
	.hotProduct .productList .list:hover{width: 48%;}
	.hotProduct .productList .list .layer{display: none;}
	.hotProduct .productList .list .picture{position: initial;}
	.hotProduct .productList .list .content{position: initial; padding: 0 20px;}
	.hotProduct .productList .list .content .title{font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.hotProduct .productList .list .content .text{max-width: max-content;}
	.hotProduct .productList .list:hover .content .title{color: #323232;}
	.hotProduct .productList .list:hover .content .text{color: #878787;}
	
	.indexProduct{padding: 30px 0;}
	.indexProduct .commonTitle{float: none;}
	.indexProduct .productCategory{width: 100%;}
	.indexProduct .productCategory li{float: left; color: #171813; line-height: 36px;padding: 0 15px; margin-bottom: 10px;}
	.indexProduct .productCategory li.current{background: #1a1d21; color: #fff; border-radius: 8px;}
	
	.indexProduct .productBox{margin-top: 20px;}
	
	.indexCase{padding-top: 30px;}
	.indexCase .caseSwiper{margin-top: 30px; padding-bottom: 50px;}
	.indexCase .caseSwiper .swiper-pagination-progressbar{width: 70%;}
	.indexCase .caseSwiper .swiper-button{width: 30%; text-align: right;}
	.indexCase .caseSwiper .swiper-button .swiper-button-prev,
	.indexCase .caseSwiper .swiper-button .swiper-button-next{margin: 0 10px;}
	
	.indexAboutus{padding: 50px 0 30px;}
	.indexAboutus .commonTitle{float: none;}
	.indexAboutus .aboutusTab{float: none; margin-top: 26px; text-align: center;}
	.indexAboutus .aboutusTab li{display: inline-block; float: none;}
	.indexAboutus .aboutusBox .label::after{left: 100px;}
	.indexAboutus .aboutusBox .company{padding: 20px;}
	.indexAboutus .aboutusBox .company .text{width: 100%; float: left;}
	.indexAboutus .aboutusBox .company .text .title{font-size: 32px; line-height: 36px; margin-top: 20px;}
	.indexAboutus .aboutusBox .company .text .subtitle{font-size: 22px; line-height: 32px; margin-top: 20px;}
	.indexAboutus .aboutusBox .company .text .more{margin-top: 20px;}
	.indexAboutus .aboutusBox .company .text .more a{display: block; width: 170px; line-height: 50px; text-align: center; border: solid #353432 1px; border-radius: 25px; color: #000; font-weight: bold;}
	.indexAboutus .aboutusBox .company .picture{display: none;}
	.indexAboutus .aboutusBox .teams{padding: 20px;}
	.indexAboutus .aboutusBox .teams .title{font-size: 32px; margin-top: 20px;}
	.indexAboutus .aboutusBox .teamsSwiper .swiper-slide{border-width: 1px;}
	.indexAboutus .aboutusBox .swiperBox{margin-top: 20px; padding-right: 0; position: relative;}
	.indexAboutus .aboutusBox .teamsSwiper .swiper-wrapper{margin-top: 30px;}
	.indexAboutus .aboutusBox .teamsSwiper .swiper-button-next{display: none;}
	.indexAboutus .aboutusBox .certificates{padding: 20px;}
	.indexAboutus .aboutusBox .certificates .title{font-size: 32px; margin-top: 20px;}
	.indexAboutus .aboutusBox .certificatesSwiper .swiper-wrapper{margin-top: 30px;}
	.indexAboutus .aboutusBox .certificatesSwiper .swiper-slide{padding: 10px; border-width: 1px;}
	.indexAboutus .aboutusBox .certificatesSwiper .swiper-button-next{display: none;}
	
	.indexNews{padding: 30px 0 0;}
	.indexNews .commonTitle{float: left;}
	.indexNews .more{float: right; font-size: 18px;}
	.indexNews .more a{display: block; color: #575656; line-height: 26px;}
	.indexNews .more b{display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 16px; border: solid #575656 1px; border-radius: 50%; margin-left: 8px;}
	
	.indexNews .newsList{padding: 30px 0 0;}
	.indexNews .newsList .list{width: 100%; padding: 20px; margin-right: 0%; margin-bottom: 26px;}
	.indexNews .newsList .list .date{font-size: 32px;}
	.indexNews .newsList .list .year{font-size: 12px;}
	.indexNews .newsList .list .title{height: 56px; line-height: 28px; font-size: 18px; margin-top: 0; padding-top: 20px;}
	.indexNews .newsList .list .picture{margin: 20px 0 0;}
	.indexNews .newsList .list:hover .title{color: #fff;}
	.indexNews .newsList .list:hover .text{color: #222;}
}