@import url("swiper.min.css");

.index-banner-swiper {width: 100%;position: relative;} 
.index-banner-swiper .swiper-wrapper{height: auto}
.index-banner {position: relative;overflow: hidden;}
.index-banner .text {position: absolute;width: 90%;top: 80%;transform: translateY(-45%);z-index: 11;color: #fff;left: 60%}
.index-banner .text h1{
	line-height:70px;
	font-size: 55px;
	width: 45%;
	text-transform: uppercase;
}
.index-banner .text h2{margin-top:1%;font-size: 30px}
.index-banner .text h3{margin-top:1%;font-size: 30px}
.index-banner .text .more{margin-top:6%;display: block;}
.index-banner-swiper .swiper-wrapper > div:nth-child(2) .text{top: 75%;}
.index-banner .text .more a{line-height: 40px;padding: 0 30px;border:2px #ffffff60 solid;color: #fff;margin-right:15px;display: inline-block;text-transform: uppercase;font-weight: 400;border-radius:5px;}
.index-banner .text .more a i{line-height: 40px;display: inline-block;margin-left: 10px}
.index-banner .text .more a.cur{background: #b1b2b3;border-color: #b1b2b3}
.index-banner .text .more a:hover{background: #fff;color: #333;border-color: #fff}
@media screen and (max-width: 1599px) {
	.index-banner .text h1{line-height:65px;font-size: 50px;width: 60%;}
	.index-banner .text h2{font-size: 28px}
}
@media screen and (max-width: 1199px) {
	.index-banner .text .more a{line-height: 34px;padding: 0 20px;font-size:12px;}
	.index-banner .text .more a i{line-height: 34px;}
}
.index-banner-swiper .swiper-slide .video,.index-banner-swiper .swiper-slide .img{background: #000;position: relative;}
.index-banner-swiper .swiper-slide .video video{width: 100%;opacity: 1;display: inline-block;vertical-align: top}
.index-banner-swiper .swiper-slide .img img{
	width: 100%;
	opacity: 1;
	display: inline-block;
	vertical-align: top
}
.index-banner-swiper .swiper-slide .text h1,.index-banner-swiper .swiper-slide .text h2,.index-banner-swiper .swiper-slide .text h3,.index-banner-swiper .swiper-slide .text .more{opacity: 0;transform:translateY(-60px);transition:all 0.8s;}
.index-banner-swiper .swiper-slide .text h2,.index-banner-swiper .swiper-slide .text h3{transition-delay: .4s;position: relative;padding-top: 20px}
.index-banner-swiper .swiper-slide .text h2{display:none;}
.index-banner-swiper .swiper-slide .text .more{transition-delay: 0.6s;}
.index-banner-swiper .swiper-slide-active .text h1,.index-banner-swiper .swiper-slide-active .text h2,.index-banner-swiper .swiper-slide-active .text h3,.index-banner-swiper .swiper-slide-active .text .more{transform: translateY(0px);opacity: 1;}
.index-banner-swiper .banner-pagination span{width: 50px;height: 4px;border-radius: 0;background: #fff;opacity: .5;}
.swiper-ctrl {position: absolute;width: 100%;left: 0;bottom: 45px;z-index: 11;font-size: 0;text-align: center;}
.scroll-center {display: inline-block;position: absolute;right: 0;bottom: -10px;width: 80px;text-align: center;}
.scroll-center .scroll {text-transform: uppercase;color: #fff;position: relative;font-size: 12px;width: 50px;vertical-align: top}
.scroll-center .scroll::before,.scroll-center .scroll::after{content: '';width: 1px;height: 35px;background: #fff;position: absolute;right: 26px;top: -40px;opacity: .5;}
.scroll-center .scroll::after{height: 15px;background: #f67a4c;opacity: 1;z-index: 11;top: -36px;width: 3px;right: 25px;-webkit-animation: rotateplane 3s infinite ease-in-out;animation: rotateplane 3s infinite ease-in-out;}
@keyframes rotateplane{ 
    0%{transform: translateY(0px);-ms-transform:translateY(0px);-moz-transform:translateY(0px);-webkit-transform:translateY(0px);-o-transform:translateY(0px)}
    50%{transform: translateY(12px);-ms-transform:translateY(12px);-moz-transform:translateY(12px);-webkit-transform:translateY(12px);-o-transform:translateY(12px)}
    100%{transform: translateY(0px);-ms-transform:translateY(0px);-moz-transform:translateY(0px);-webkit-transform:translateY(0px);-o-transform:translateY(0px)}
}
.index-banner-swiper .swiper-banner-prev,.index-banner-swiper .swiper-banner-next {position: absolute;top: 50%;left: 0}
.index-banner-swiper .swiper-banner-prev:hover,.index-banner-swiper .swiper-banner-next:hover {opacity: .5;}
.left-pagination {position: absolute;left: 50%;transform: translateX(-50%);z-index: 11;bottom: 0}
.index-banner-swiper .banner-pagination {text-align: center;left: auto;bottom:auto!important;right:auto!important;left:auto!important;width: auto;color: #fff;width:auto;transform:none;position: relative}
.index-banner-swiper .banner-pagination span{opacity: 1;margin: 0 3px!important;position: relative;width: 32px;height: 32px;background: transparent;display: inline-block;vertical-align: middle;}
.index-banner-swiper .banner-pagination span::before {content: '';width:5px;height:5px;position: absolute;left:50%;top:50%;border-radius: 100%;transform: translate(-50%,-50%);background: #fff;transition:all .4s ease;opacity: .5;}
.index-banner-swiper .banner-pagination span::after {content: '';width:32px;height:32px;position: absolute;left:50%;top:50%;border-radius: 100%;transform: translate(-50%,-50%);z-index: 1;border: 2px solid rgba(255,255,255,.5);opacity: 0;transition:all .4s ease;}
.index-banner-swiper .banner-pagination span.swiper-pagination-bullet-active::before {background: #fff!important;opacity: 1;}
.index-banner-swiper .banner-pagination span.swiper-pagination-bullet-active::after {opacity: 1;}
.index-banner-swiper .banner-pagination span.swiper-pagination-bullet-active .content {opacity: 1;}
.index-banner-swiper .banner-pagination span .content {position: absolute;top: 0;width: 50%;height:100%;margin: 0;padding: 0;overflow: hidden;opacity: 0;transition:all .4s ease;z-index: 11;}
.index-banner-swiper .banner-pagination span .left {left: 0;}
.index-banner-swiper .banner-pagination span .right {right: 0;}
.index-banner-swiper .banner-pagination span .circle {position: absolute;margin: 0;width: 32px;height: 32px;border-radius: 50%;border: 2px solid transparent;transform: rotate(135deg);box-sizing: border-box;}
.index-banner-swiper .banner-pagination span .left-circle {left: 0;border-top-color: #fff;border-left-color: #fff;}
.index-banner-swiper .banner-pagination span .right-circle {right: 0;border-bottom-color: #fff;border-right-color: #fff;}
.index-banner-swiper .banner-pagination span.swiper-pagination-bullet-active .left-circle {animation:circleleft 5s linear forwards;}
.index-banner-swiper .banner-pagination span.swiper-pagination-bullet-active .right-circle {animation:circleright 5s linear forwards;}
.index-banner-swiper .banner-pagination span.swiper-pagination-bullet-active:first-child .left-circle {animation:circleleft 26s linear forwards;}
.index-banner-swiper .banner-pagination span.swiper-pagination-bullet-active:first-child .right-circle {animation:circleright 26s linear forwards;}
@keyframes circleright {0% {transform: rotate(135deg);}50%,100% {transform: rotate(315deg);}}
@keyframes circleleft {0%,50% {transform: rotate(135deg);}100% {transform: rotate(315deg);}}

@media screen and (max-width: 1499px) {
	.number-prevnext {margin-top: -11.5px;}
	.index-banner .text h1{line-height: 45px;font-size: 38px}
	.index-banner .text h2{font-size: 26px}
}
@media screen and (max-width: 1299px) {
	.index-banner .text h1{line-height: 35px;font-size: 35px;width: 80%;}
	.index-banner .text h2{font-size: 22px}	
}

@media screen and (max-width: 991px) {

.index-banner .text {position: absolute;width: 100%;top: 80%;transform: translateY(-45%);z-index: 11;color: #fff;left: 25%}


	.index-banner .text h1{line-height: 28px;font-size: 24px}
	.index-banner .text h2{font-size: 18px}
	.index-banner-swiper .swiper-slide .video:after,.index-banner-swiper .swiper-slide .img:after{height:25vh;content:'';display:block}
    .index-banner-swiper .swiper-slide .img img,.index-banner-swiper .swiper-slide .video video{position:absolute;left:50%;height:100%;width:auto;top:0;-moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%);transform: translateX(-50%);}
    .scroll-center {width: 60px;}
	
	.custom-btn1 {
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
  background: #B1F315;
  padding: 8px 12px;
  color: #0F142B;
  text-transform: capitalize;
  border: none;
  border-radius: 7px;
  position: relative;
  display: inline-block;
  transition: 0.5s;
  margin-left:5px;

}
.custom-btn1:hover {
  background: #0F142B;
  color: #ffffff;
}






.custom-btn2 {
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
  background: #dd4b1c;
  padding: 8px 12px;
 color: #ffffff;
  text-transform: capitalize;
  border: none;
  border-radius: 7px;
  position: relative;
  display: inline-block;
  transition: 0.5s;
 
    margin-right:5px;
}
.custom-btn2:hover {
  background: #2a8cc6;
  color: #ffffff;
}

	
	
	
	
}
@media screen and (max-width: 980px) {
	.header-nav,.number-prevnext,.left-pagination::before,.index-customer-stories-top .more-1,.industry-trends-item a::after,.footer-content-right,.div-product-item .pic,.div-consulting-service .img,.scheme-advantages-item::after,.achievements-pagination,.customer-cases-nav a::before,.return-1{display: none;}
	.header-logo {width: 50%;}
	.swiper-ctrl {bottom: 7%;}
}
@media screen and (max-width:767px) {
	.index-banner .text h1{line-height: 25px;font-size: 20px;width: 90%}
	.index-banner .text h2{font-size: 16px}
}

.banner-inner{width:100%;position: relative;overflow: hidden;}
.banner-inner .comm-title{position: absolute;left:5%;top: 40%;z-index: 100;}
.banner-inner .comm-title h1{font-size:65px;color: #fff;position: relative;padding-bottom: 25px;font-weight: bold;}
.banner-inner .comm-title h1:after,.banner-inner .comm-title h1:before{background:#fff;display: none}
.banner-inner .comm-title h2{color: #fffffff0;font-size:18px;padding-top:50px;}
.banner-inner .bgimg{position:relative;will-change: transform;display: block;}
.banner-inner .bgimg img{width: 100%}
@media screen and (max-width: 1599px) {
	.banner-inner .comm-title h1{font-size:45px}
	.banner-inner .comm-title h2{font-size:16px;padding-top:40px;}
}
@media screen and (max-width: 1299px) {
	.banner-inner .comm-title h1{font-size:30px;padding-bottom: 0}
	.banner-inner .comm-title h2{font-size:14px;padding-top:30px;}
	.banner-inner .bgimg:after{height:45vh;content:'';display:block}
    .banner-inner .bgimg img{position:absolute;left:50%;height:100%;width:auto;top:0;-moz-transform: translateX(-50%);-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%);transform: translateX(-50%);}
}
@media screen and (max-width: 991px) {
	.banner-inner .comm-title{top: 50%}
	.banner-inner .comm-title h1{font-size:25px}
	.banner-inner .bgimg:after{height:30vh;content:'';display:block}
}
@media screen and (max-width: 767px) {
	.banner-inner .comm-title h1{font-size:20px}
}
.index-downpart{display: block;width: 100%;font-size: 0;padding: 0;margin-top: 10px}
.index-downpart dl{
	width:25%;
	padding-left:5px;
	padding-right:5px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	margin-bottom:10px;
}
.index-downpart dl:nth-child(4n){padding-right: 0}
.index-downpart dl:nth-child(4n+1){padding-left: 0}
.index-downpart dl dt{display: block;background: #000;overflow:hidden;}
.index-downpart dl dt img{width: 100%;opacity: 0.5;transition: all .3s}
.index-downpart dl:hover dt img{width: 100%;opacity: 0.8;transform: scale(1.05);}
.index-downpart dl dd{position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: table;padding: 0 20%;text-align: center;}
.index-downpart dl dd .vermidd h1{
	color: #fff;
	font-size: 24px;
	display: block;
	margin-bottom: 20px;
	font-weight:400;
}
.index-downpart dl dd .vermidd h2{color: #fff;font-size: 18px;display: block;font-weight:200;line-height: 25px;display: none}
.index-downpart dl dd .vermidd .more{display:block;margin-top:50px}
.index-downpart dl dd .vermidd .more a{display: inline-block;border:1px #fff solid;font-size: 14px;text-transform: uppercase;color: #fff;padding: 8px 30px;border-radius:5px;}
.index-downpart dl dd .vermidd .more a:hover{background: #fff;border-color: #fff;color: #333}
@media screen and (max-width: 1399px) {
	.index-downpart dl dd .vermidd h1{font-size: 22px;}
	.index-downpart dl dd .vermidd h2{font-size: 16px;line-height: 22px}
	.index-downpart dl dd .vermidd .more{margin-top:40px}
}
@media screen and (max-width: 1199px) {
	.index-downpart dl dd .vermidd h1{font-size: 24px;}
	.index-downpart dl dd .vermidd h2{font-size: 15px;line-height: 20px}
	.index-downpart dl dd .vermidd .more{margin-top:30px}
	.index-downpart dl dd .vermidd .more a{font-size: 13px;padding: 5px 20px;}
}
@media screen and (max-width: 991px) {
	.index-downpart dl dd{padding: 0 10%;}
	.index-downpart dl dd .vermidd h1{font-size: 20px;margin-bottom: 10px;}
	.index-downpart dl dd .vermidd h2{font-size: 14px;line-height: 18px}
	.index-downpart dl dd .vermidd .more{margin-top:20px}	
}
@media screen and (max-width: 767px) {
    .vermidd{height:22vh}
	.index-downpart dl dd .vermidd h1{font-size: 16px;}
	.index-downpart dl{width:100%;padding: 0}
	.index-downpart dl dd .vermidd .more a{font-size: 0.9rem}
}