@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; color: #fff;}
.banner .content h3{font-size: 30px; color: #0199ff; margin-top: 10px;}
.banner .content p{width: 510px; font-size: 18px; line-height: 32px; color: #fff; margin-top: 60px;}
.banner .content a{display: inline-block; font-size: 18px; color: #fff; margin-top: 100px;}
.banner .swiper-pagination{bottom: 20px !important;}
.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: #0199ff;}

.commonTitle{}
.commonTitle h3{font-size: 54px;}
.commonTitle p{font-size: 25px;}

.indexProduct{height: 890px; background: url("../images/productbg.jpg") center no-repeat;}
.indexProduct .productContent{max-width: 1400px; margin: 0 auto; position: relative;}
.indexProduct .commonTitle{padding-top: 80px;}
.indexProduct .commonTitle h3{color: #222;}
.indexProduct .commonTitle p{color: #1c1c1c;}
.indexProduct .productCategory{position: absolute; left: 0; top: 220px; border-bottom: solid #000 1px; z-index: 9; padding-left: 10px;}
.indexProduct .categorySwiper{}
.indexProduct .categorySwiper .swiper-slide{width: max-content !important; padding-bottom: 10px; cursor: pointer;}
.indexProduct .categorySwiper .swiper-slide-thumb-active{color: #0199ff; border-bottom: solid #0199ff 3px; margin-bottom: -2px;}
.indexProduct .productBox{width: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.indexProduct .productBox .listBox{position: relative; overflow: hidden;}
.indexProduct .productBox .listBox .content{position: absolute; left: 0; top: 320px;}
.indexProduct .productBox .listBox .title{font-size: 42px; color: #0199ff;}
.indexProduct .productBox .listBox .text{color: #666; line-height: 30px; margin-top: 10px;}
.indexProduct .productBox .listBox .text p{position: relative; padding-left: 20px;}
.indexProduct .productBox .listBox .text p::after{width: 8px; height: 8px; content: ''; background: #666; position: absolute; left: 2px; top: 11px; transform: rotate(45deg);}
.indexProduct .productBox .listBox .more{margin-top: 20px;}
.indexProduct .productBox .listBox .more a{display: inline-block; width: 200px; height: 42px; text-align: center; line-height: 42px; background: #0199ff; color: #fff; border-radius: 8px;}
.indexProduct .productBox .listBox .picture{float: right;}
.indexProduct .productBox .swiper-pagination{width: 100px; text-align: left; bottom: 24px;}
.indexProduct .productBox .swiper-pagination .swiper-pagination-bullet{background: #3c3e44; opacity: 1;}
.indexProduct .productBox .swiper-pagination .swiper-pagination-bullet-active{background: #0199ff;}
.indexProduct .productBox .swiper-button{width: 120px; height: 44px; position: absolute; right: 0; bottom: 20px;}

.indexAboutus{padding: 70px 0; background: url("../images/aboutusbg.jpg") center no-repeat; background-size: auto 100%;}
.indexAboutus .commonTitle{color: #fff;}
.indexAboutus .commonTitle p{margin-top: 20px;}
.indexAboutus .aboutPicture{width: 49%; float: left; margin-top: 40px; padding-bottom: 30px; position: relative;}
.indexAboutus .aboutSwiper{border-radius: 18px; overflow: hidden;}
.indexAboutus .aboutSwiper .swiper-slide img{width: 100%;}
.indexAboutus .aboutSwiper .swiper-slide .spotlight{width: 70px; height: 70px; background: #0199ff; color: #fff; font-size: 50px; text-align: center; line-height: 70px; position: absolute; bottom: 0; right: 0;}
.indexAboutus .aboutSwiper .swiper-pagination{bottom: 0 !important; text-align: left;}
.indexAboutus .aboutSwiper .swiper-pagination-bullet{width: 12px; height: 12px; background: #fff; opacity: 1; cursor: pointer;}
.indexAboutus .aboutSwiper .swiper-pagination-bullet-active{background: #0199ff;}
.indexAboutus .aboutContent{width: 49%; float: right; margin-top: 40px;}
.indexAboutus .aboutContent .text{font-size: 16px; line-height: 32px; color: #fff;}
.indexAboutus .aboutContent .more{float: right; margin-top: 30px;}
.indexAboutus .aboutContent .more a{display: inline-block; width: 138px; height: 36px; text-align: center; line-height: 36px; border: solid #fff 1px; color: #fff; border-radius: 8px;}

.indexCase{padding: 80px 0 30px; background: url("../images/casesbg.jpg") center no-repeat;}
.indexCase .caseSwiper{position: relative; overflow: hidden; margin-top: 50px; padding-bottom: 50px;}
.indexCase .caseSwiper .swiper-slide img{width: 100%; border-radius: 20px;}
.indexCase .caseSwiper .swiper-slide p{font-size: 16px; text-align: center; margin-top: 10px;}
.indexCase .caseSwiper .swiper-pagination-bullet{width: 12px; height: 12px; background: #000; opacity: 1; cursor: pointer;}
.indexCase .caseSwiper .swiper-pagination-bullet-active{background: #0199ff;}

.indexNews{padding: 100px 0 40px; background: url("../images/newsbg.jpg") center top no-repeat;}
.indexNews .commonTitle{color: #fff;}
.indexNews .newsList{padding: 60px 0 50px;}
.indexNews .newsList .list{width: 31%; float: left; background: #fff; margin-right: 3.5%;}
.indexNews .newsList .list:nth-child(3){margin-right: 0;}
.indexNews .newsList .list .picture{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 .content{background: #fff; padding: 26px; border-radius: 0 0 26px 26px; box-shadow: 0 0 20px #eee;}
.indexNews .newsList .list:hover .content{background: #0199ff;}
.indexNews .newsList .list .date{color: #222; background: url("../images/date_black.png") left center no-repeat; padding-left: 23px;}
.indexNews .newsList .list .title{margin-top: 20px;}
.indexNews .newsList .list .title a{display: block; font-size: 18px; color: #252525; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.indexNews .newsList .list .text a{display: block; height: 72px; line-height: 26px; color: #222; margin-top: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.indexNews .newsList .list .more{margin-top: 30px;}
.indexNews .newsList .list .more a{display: block;}
.indexNews .newsList .list .more b{float: right; font-size: 16px; font-family: cursive; padding-left: 23px; position: relative;}
.indexNews .newsList .list .more b::after{width: 1px; height: 18px; content: ''; background: #494949; position: absolute; left: 0;}
.indexNews .newsList .list:hover .date{color: #fff; background-image: url("../images/date_white.png");}
.indexNews .newsList .list:hover .title a{color: #fff;}
.indexNews .newsList .list:hover .text a{color: #fff;}
.indexNews .newsList .list:hover .more a{color: #fff;}
.indexNews .newsList .list:hover .more b::after{background: #fff;}
.indexNews .newsList .newsMore{margin-top: 40px; text-align: center;}
.indexNews .newsList .newsMore a{display: inline-block; line-height: 46px; padding: 0 22px; color: #000; border: solid #1e1e1e 1px; border-radius: 10px;}
.indexNews .newsList .newsMore b{display: inline-block; font-size: 16px; font-family: cursive; margin-left: 50px;}