@charset "utf-8";
@import url("./index/banner.css");
/* product */
.index-product{}
.index-product-left{width: 58%; padding: 120px 200px 90px 160px;}
.index-product-desc .swiper-container{overflow: hidden;}
.index-product-title p{ font-size: 24px; color: var(--default);}
.index-product-title h3{ margin-top: 15px; font-size: 32px;}

.index-product-content{ margin-top: 35px; line-height: 1.6; font-size: 18px;}
.index-product-more{margin-top: 50px;}
.index-product-more a{ position: relative; display: inline-block; padding: 0 60px 0 25px; line-height: 45px; background-color: var(--default); color: #fff;}
.index-product-more a i{ position: absolute; top: 18px; right: 20px; display: block; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg);}

@media (max-width:1600px) {
	.index-product-left{  padding: 120px 160px 90px 100px;}
	.index-product-more{margin-top: 30px;}
}

@media (max-width:1440px) {
	.index-product-left{  padding: 100px 60px;}
	.index-product-more{margin-top: 30px;}
}

@media (max-width:1200px) {
	.index-product-left{ width: 100%; padding: 80px 30px;}
}

@media (max-width: 768px) {
	.index-product-left{ width: 100%; padding: 50px 15px;}
	.index-product-title p{ font-size: 18px; color: var(--default);}
	.index-product-title h3{ font-size: 24px;}
	.index-product-content{ margin-top: 25px; font-size: 16px;}
}


@media (max-width: 640px) {
	.index-product-content{ font-size: 14px;}
}
/* list */
.index-product-list{margin-top: 130px;}
.index-product-list .swiper-container{ position: relative; padding-bottom: 25px; overflow: hidden;}
.index-product-item h3{padding: 15px 0; font-size: 18px; color: var(--default);}
.index-product-pic{padding: 15px 5px; border: 1px solid #eee; overflow: hidden;}
.index-product-pic img{width: 100%;}

.index-product-list .swiper-container .swiper-slide-thumb-active .index-product-pic{background-color: #f5f5f5;}
.index-product-list .swiper-container .swiper-scrollbar-drag{background-color: var(--default);}

.index-product-right{width: 42%; padding-top: 140px; background-image: url(../images/product-bg.png);}
.index-product-poster{transform: translateX(-200px);}
.index-product-poster .swiper-container{overflow: hidden;}
.index-product-poster .swiper-slide img{width: 100%;}
@media (max-width:1600px) {
	.index-product-list{margin-top: 70px;}
	.index-product-poster{transform: translateX(-140px);}
}

@media (max-width:1440px) {
	.index-product-list{margin-top: 50px;}
	.index-product-right{padding-top: 180px;}
	.index-product-poster{transform: translateX(0);}
}

@media (max-width:1200px) {
	.index-product-list{margin-top: 50px;}
	.index-product-right{display: none;}
	.index-product-poster{transform: translateX(0);}
}

@media (max-width:768px) {
	
}

/*  */
.index-special-bg{background-image: url(../images/special-bg.jpg);}

.index-special-title{text-align: center; color: #fff;}
.index-special-title h3{font-size: 36px;}
.index-special-title p{ margin: 25px auto 0; max-width: 800px; line-height: 1.6; font-size: 18px;}

.index-special-list{margin-top: 60px;}
.index-special-list ul li{width: 33.33%; text-align: center; overflow: hidden;}

.index-special-point{ position: relative; margin: 50px 0;}
.index-special-point::after{position: absolute; top: 50%; left: 0; content: ''; width: calc( 50% - 30px ); height: 1px;  border: 1px dashed #fff;}

.index-special-point span{ position: relative; display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; color: #fff; background-color: rgba(255,255,255,.3); }
.index-special-point span::before{position: absolute; top: -10px; left: -10px; content: ''; width: 60px; height: 60px; border-radius: 50%; border: 1px solid #fff;}

.index-special-list ul li:first-child .index-special-point::after{ left: inherit; right: 0;}
.index-special-list ul li:nth-child(2) .index-special-point::before{position: absolute; top: 50%; right: 0; content: ''; width: calc( 50% - 30px ); height: 1px; border: 1px dashed #fff;}


.index-special-desc{color: #fff;}
.index-special-desc h3{font-size: 32px;}
.index-special-desc p{ margin-top: 15px; line-height: 1.6; font-size: 18px;}
.index-special-desc p span{display: block;}

@media (max-width:1200px) {
	.index-special-desc h3{font-size: 24px;}
	.index-special-desc p{padding: 0 10px; font-size: 16px;}
	.index-special-desc p span{display: initial;}
	
}

@media (max-width: 768px) {
	.index-special-title h3{font-size: 24px;}
	.index-special-title p{ font-size: 16px;}
	
	.index-special-list{margin-top: 0;}
	.index-special-list ul li{width: 100%; margin-top: 25px;}
	.index-special-desc h3{font-size: 20px;}
	.index-special-point{ position: relative; margin: 20px 0;}
	.index-special-point::before,
	.index-special-point::after{display: none;}
}

/* app */
.index-app{background-color: #F7FAF8;}
.index-app-list{width: 25%;}
.index-app-list ul li{width: 50%; text-align: center; align-items: center;justify-content: center; border: 1px solid #EAEAEA;}
.index-app-list ul li a{ display: block; width: 100%; padding: 30px 15px; text-align: center;}
.index-app-list ul li a svg{ max-width: 125px; fill: #808080;}
.index-app-list ul li a h3{ margin-top: 10px; font-size: 18px; color: #808080;}

.index-app-list ul li:hover,
.index-app-list ul li.on{background-color: var(--default); border-color: var(--default);}
.index-app-list ul li:hover svg,
.index-app-list ul li.on svg{fill: #fff;}
.index-app-list ul li:hover h3,
.index-app-list ul li.on h3{color: #fff;}

.index-app-poster{width: 75%;}
.index-app-poster .swiper-container{ width: 100%; overflow: hidden;}
.index-app-poster .swiper-slide{ width: 100%; height: 900px; padding: 160px 120px;}

.index-app-title{ position: relative; padding-bottom: 25px;}
.index-app-title::before{position: absolute; bottom: 0; left: 0; content: ''; width: 80px; height: 4px; background-color: #fff; }
.index-app-title h3{ font-size: 36px; color: #fff;}

.index-app-desc{margin-top: 100px; color: #fff;}
.index-app-desc h4{font-size: 30px;}
.index-app-desc p{ margin-top: 35px; line-height: 1.6; font-size: 18px; max-width: 400px;}

.index-app-more{margin-top: 50px;}
.index-app-more a{ position: relative; display: inline-block; padding: 0 60px 0 25px; line-height: 45px;  border: 1px solid #fff; color: #fff;}
.index-app-more a i{ position: absolute; top: 18px; right: 20px; display: block; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg);}

@media (max-width:1800px) {
	.index-app-list ul li a{  padding: 32px 15px; }
}
@media (max-width:1600px) {
	.index-app-list ul li a{  padding: 25px 15px; }
	.index-app-poster .swiper-slide{ height: 800px; padding: 100px;}
}
@media (max-width:1440px) {
	.index-app-list ul li a{  padding: 30px 15px; }
	.index-app-list ul li a svg{ width: 55px;}
}

@media (max-width:1200px) {
	.index-app-list ul li a{  padding: 20px 15px; }
	.index-app-list ul li a svg{ width: 50px;}
	.index-app-list ul li a h3{ margin-top: 20px;}
	
	.index-app-poster .swiper-slide{ height: 600px; padding: 50px;}
	
	.index-app-title h3{ font-size: 32px;}
	.index-app-desc{margin-top: 50px;}
	.index-app-desc h4{font-size: 24px;}
	.index-app-desc p{ margin-top: 25px; font-size: 16px;}
	
}

@media (max-width:860px) {
	.index-app-list ul li a svg{ width: 40px;}
	.index-app-list ul li a h3{ margin-top: 10px;}
	.index-app-poster .swiper-slide{ height: 500px; padding: 30px;}
	.index-app-title h3{ font-size: 24px;}
	.index-app-desc{margin-top: 30px; }
	.index-app-desc h4{font-size: 20px;}
	.index-app-desc p{ margin-top: 25px; font-size: 16px;}
	.index-app-more{margin-top: 30px;}
	.index-app-more a{ line-height: 40px; }
}

@media (max-width: 768px) {
	.index-app-list{width: 100%;}
	.index-app-list ul li{width: 25%;}
	.index-app-poster{width: 100%;}
}
@media (max-width: 640px) {
	.index-app-list ul li a{  padding: 10px; }
	.index-app-list ul li a img{ width: 30px;}
	.index-app-list ul li a h3{ margin-top: 0; font-size: 12px;}
	.index-app-poster .swiper-slide{ height: 440px; padding: 50px 15px;}
	
	.index-app-desc h4{font-size: 18px;}
	.index-app-desc p{ margin-top: 20px; font-size: 14px;}
	
}

/* news */
.index-news-title{justify-content: space-between;}
.index-news-title h3{font-size: 36px; color: var(--default);}

.index-news-types{display: inline-block;}
.index-news-types ul li{margin-left: 15px;}
.index-news-types ul li a{ display: inline-block; padding: 0 25px; line-height: 45px;  border: 1px solid #eee; color: #666;}
.index-news-types ul li.on a,
.index-news-types ul li a:hover{background-color: var(--default); color: #fff; border: 1px solid var(--default);}

.index-news-swiper {margin-top: 60px; display: none;}
.index-news-swiper .swiper-container{padding-bottom: 5px; overflow: hidden;}

.index-news-item{overflow: hidden;}.index-news-pic{ position: relative; display: block; height: 350px; overflow: hidden;}
.index-news-pic::before{position: absolute; top: 0; left: 0; content: ''; z-index: 1; width: 100%; height: 100%; background-color: rgba(29, 101, 55,.4); opacity: 0; visibility: hidden; transition: .3s;}

.index-news-content{ position: relative; padding: 30px 0; }
.index-news-content::before,
.index-news-content::after{position: absolute; bottom: 0; left: 0; content: ''; width: 0; height: 1px; background-color: var(--default); transition: .3s;}
.index-news-content::after{height: 5px; bottom: -2px;}

.index-news-content span{font-size: 18px; color: #808080;}
.index-news-content h3{ margin-top: 10px;}
.index-news-content h3 a{display: block; height: 30px; line-height: 1.4; font-size: 24px; color: #172045; overflow: hidden;}
.index-news-content p{ margin-top: 25px;  height: 40px; line-height: 1.4; font-size: 16px; color: #666; overflow: hidden;}

/* .index-news-item:hover .index-news-pic::before{ opacity: 1; visibility: visible;} */
.index-news-item:hover .index-news-pic::before{visibility: visible; opacity: 1;}
.index-news-item:hover .index-news-content::before{width: 100%;}
.index-news-item:hover .index-news-content::after{width: 80px;}

@media (max-width:1440px) {
	
}

@media (max-width: 640px) {
	.index-news-title{justify-content: center; flex-direction: column;}
	.index-news-title h3{font-size: 24px; color: var(--default); text-align: center;}
	.index-news-types{margin-top: 25px;}
	.index-news-types ul{justify-content: center;}
	.index-news-types ul li{margin: 0 5px;}
	.index-news-types ul li a{ display: inline-block; padding: 0 20px; line-height: 40px;  border: 1px solid #eee; color: #666;}
	.index-news-swiper {margin-top: 40px;}
	.index-news-pic{ height: 280px; }
	.index-news-content h3 a{font-size: 18px; height: 24px; }
	.index-news-content p{ font-size: 14px;}
}

@media (max-width: 480px) {
	.index-news-types ul li{margin: 0 5px;}
	.index-news-types ul li a{ padding: 0 10px; line-height: 35px;  font-size: 14px;}
}

/* contact */
.index-contact-bg{background-color: #F7FAF8;}
.index-contact-title h3{ font-size: 36px; color: #172045;}
.index-contact-title p{ margin-top: 22px; font-size: 18px; line-height: 1.6; color: #666;}

.index-contact{position: relative; z-index: 1; justify-content: space-between; overflow: hidden;}

.index-contact-left{width: 41%; padding-top: 90px;}
.index-contact-form{justify-content: space-between;}
.index-contact-item{position: relative; width: 48%; margin-top: 20px;}
.index-contact-item input{ display: block; width: 100%; padding: 0 15px; line-height: 55px; font-size: 18px;}
.index-contact-form .index-contact-company{width: 100%;}
.index-contact-form button{ position: relative; margin-top: 20px; display: inline-block; padding: 0 60px; line-height: 55px; background-color: var(--default); border: none; color: #fff; font-size: 18px;}

.index-contact-poster{ width: 58%; height: 500px; padding-top: 60px; padding-left: 50px; }
.index-contact-poster img{width: 100%;}


@media (max-width:1440px) {
	.index-contact-left{width: 600px; padding: 90px 0;}
	.index-contact-poster{ position: absolute; bottom: 0; right:0; z-index: -1; width: 58%; height: 500px; padding-top: 60px; padding-left: 0; }
}

@media (max-width: 768px) {
	
	.index-contact-title h3{ font-size: 24px;}
	.index-contact-title p{ margin-top: 15px; font-size: 16px;}
	
	.index-contact-left{width: 100%; padding: 90px 0;}
	.index-contact-poster{  bottom: -100px; width: 100%; height:auto; padding:0;}
}

@media (max-width: 640px) {
	.index-contact-title p{ font-size: 14px;}
	
	.index-contact-left{ padding: 50px 0;}
	.index-contact-item{ width: 100%;}
	.index-contact-item input{ line-height: 40px; font-size: 14px;}
	.index-contact-form button{  padding: 0 40px; line-height: 40px;  font-size: 14px;}
}

/*  */