@charset "utf-8";
/* CSS Document */

/*banner*/
#i_banner { position: relative; z-index: 0;}
#i_banner .swiper-slide { position: relative; z-index: 0;}
#i_banner .pic { position: relative; z-index: 0; padding-top:50%;}
#i_banner .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;object-fit: cover;}
#i_banner .pic2{ display:none;}
#i_banner .txtb { position: absolute; left: 0; top:14vw;  right: 0; right: 0;
display: flex; justify-content: center; align-items: center;}
#i_banner .txtb .txt { width:62%; margin: 0 auto 0 0; text-align: left; color: rgba(255,255,255,0.9); 
filter:alpha(opacity=0);-moz-opacity:0; opacity:0;
transition: all 1s;
-webkit-transition:all 1s;
transform: translate(0,90px);
-ms-transform: translate(0,90px);
-webkit-transform: translate(0,90px);}
#i_banner .txtb .txt .comp { line-height: 1.2;  font-weight:bold;}
#i_banner .txtb .txt .name { margin-top: .3em;  font-weight: lighter; line-height: 1.2;}
#i_banner .txtb .txt .intro { margin-top: .4em; line-height: 1.2;  font-weight: lighter;
overflow: hidden; height: 1.2em;}
#i_banner .txtb .txt .btnWhite { margin-top: 1.9em;}

#i_banner .swiper-slide-active  .txtb .txt {
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
transform: translate(0,0);
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0);}

#i_banner .swiper-pagination { height: 6.28em; padding: 0 2.8%;
 bottom: 0; /* border-top: 1px solid rgba(255,255,255,0.5) ;*/
   display: flex; justify-content: flex-start; align-items: center;}
#i_banner .swiper-pagination-bullet { width: 0.8em; height: 0.8em;
 background-color: #fff; margin: 0 0.4em !important;
  filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
}
#i_banner .swiper-pagination-bullet-active { position: relative; z-index: 0;
	 filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
	 background-color: #4ebbe9;
}


#i_banner .btnNPW { position: absolute; right:0; margin-right: 2.8%;  bottom: 1.1em;
z-index: 1000;height: 2.8em; width:7.9em; text-align: center; }
#i_banner .btnNexts,#i_banner .btnPrevs { position: relative;
	cursor: pointer; display: inline-block;
	width:1.6em; height: 1.6em; margin:0 0.1em;
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
	background: url(../images/arrow_2.png) center center no-repeat;
	background-size:contain;
} 
#i_banner .btnPrevs { left: 5.2%; right: auto;
transform: rotate(180deg);
-ms-transform: rotate(180deg); 
-webkit-transform: rotate(180deg); 
}
#i_banner .btnNexts:hover,
#i_banner .btnPrevs:hover {
filter:alpha(opacity=80);-moz-opacity:0.8; opacity:0.8;
}
#i_banner  .swiper-button-disabled,
#i_banner  .swiper-button-disabled:hover{  background: transparent;
filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;}

#i_banner .num { position: absolute; z-index: 1000; left: 9.3%; color: #fff;bottom: 2.6em;}
#i_banner .num span.cur { font-size: 1.5em;}

 @media only screen and (max-width:828px) { 
#i_banner .con { width:  90vw; margin: 0 1vw;}
#i_banner .pic {  display:none;}
#i_banner .btnNPW  { font-size: 2vw; }
#i_banner .swiper-pagination { font-size: 2vw;}
#i_banner .swiper-pagination-bullet { width: 6px; height: 6px;}
#i_banner .pic2{ display: block;  position: relative;  z-index: 0; margin-top:0px;} #i_banner .pic2 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
}


/*关于*/
.aboutBox { padding: 5.2em 0 5.2em;}
.aboutBox .conA { display: flex; justify-content: space-between; align-items: center;}
.aboutBox .conL {width: 48.2%;}
.aboutBox .conR { width: 50%;}
.aboutBox .conR .pic {  width: 100%; position: relative; z-index: 0; padding-top:50%;overflow: hidden; }
.aboutBox .conR .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;object-fit: cover;}
.aboutBox .conL { text-align: left;}

.aboutBox .conL .name { color: #181818;  }
.aboutBox .conL .name2 { margin-top: 0.2em; color: #181818;}
.aboutBox .conL .intro { margin-top: 1em; color: #666; line-height: 1.7;}
.aboutBox .conL .btnWhite { margin-top: 1em; }

.aboutBox .conL .listn { flex: 1; margin-top:1em; background:#f4f5f9; padding: 1% 0;  border-radius:0 20px 0 20px;}
.aboutBox .conL .listn ul{ height: 100%;  display: flex; justify-content: space-around;  }
.aboutBox .conL .listn li{ text-align:left;  position:relative;} .aboutBox .conL .listn  .jiahao{ position:absolute; top:0px; right:0px; font-weight:bold; color:#04348f;}
.aboutBox .conL .listn .num { }
.aboutBox .conL .listn .num  b { font-size: 2.6em; font-weight: bold; color:#04348f;}

/*产品*/
.starBox { padding: 4em 0 4em; background:url(../images/cp_bj2.jpg) bottom repeat-x #e5edf7;}
.starBox .con{ background:url(../images/cp_bj1.jpg)no-repeat;  position:relative;}
.starBox .tit { text-align:left; }
.starBox .tit .name { font-weight: bold;}
.starBox .tab {   position:absolute; top:0em; right:0em; overflow:hidden;  width:60%;}
.starBox .tab ul {  display: flex;  flex-direction: row;   justify-content: start; line-height: 3em; text-align:right;}
.starBox .tab ul li { cursor: pointer; height: 3.2em;  line-height: 3.2em;  width: 15.85em; 
 overflow: hidden; margin-right: 0.3em; padding:0 2%; text-align: center; background:#FFF;
 transition: all 0.5s;
-webkit-transition:all 0.5s;
-moz-box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, .1);
box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, .1); border-radius:1em 0em;}
.starBox .tab ul li:hover { color: #fff; font-weight: bold; background:#04348f; }



.starBox  .conSZ { margin-top: 0.75em; position: relative; z-index: 0;}
.starBox  .conS {  position: absolute; left: 0; top: 0; z-index: 0;
 width: 100%; height: 100%;
 transition: all 0.5s;
 -webkit-transition:all 0.5s;
 filter:alpha(opacity=0);-moz-opacity:0; opacity:0;
 }
.starBox  .conS:nth-child(1) { position: relative;}
.starBox  .conS.show { z-index: 1; display: block;
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
}


.swiper-solu-d { position: relative; z-index: 0; width:100%; margin: 2.8% auto 0 0; overflow: visible;}
.swiper-solu-d .swiper-container {overflow: visible;   display: flex; justify-content:center ;  flex-direction: row; }
.swiper-solu-d .item {position: relative; z-index: 0; margin-right: 2.7%;
  display: flex; justify-content: space-between; align-items: stretch;}
   .swiper-star .item::after { content: ""; display: block; position: absolute;
   left: 0; top: 0; width: 100%; height: 100%;}
.swiper-solu-d .swiper-slide-active .item::after { display: none;}

.swiper-solu-d .item .picb {  width:100%; overflow: hidden;}

.swiper-solu-d .item .picb .pic {position: relative; z-index: 0; padding-top:40%; position:relative;}
.swiper-solu-d .item .picb .pic a { display: block; cursor: pointer;}
.swiper-solu-d .item .picb img { position: absolute; left: 0; top: 0;width: 100%; height: 100%; object-fit: cover;}
.swiper-solu-d .item .txtb { position: absolute; left:4%; bottom:3%; text-align:left;}
.swiper-solu-d .item .txtb .name { line-height: 1.6em; overflow: hidden; font-weight: bold;}

.swiper-solu-d .item .txtb .moers {position: absolute; right:4%; bottom:3%;}
.swiper-solu-d .item .btnBlue2 { margin-top:4em; padding-right: 2em; padding-left: 1.7em;}


 
 .swiper-star .item .btnMore { display: inline-block; margin-top: 7.5%; color: #f4f8f6;
 background-image: url(../images/arr2_white.png);}
  .swiper-star .item .btnMore:hover { color: #fff;}
  

  

  @media only screen and (max-width:828px) {
 	 .swiper-solu-d .item { display: block;}
 	 .swiper-solu-d .item .picb {  width:auto;}
	  .swiper-solu-d .item .txtb {  padding: 2em 1.5em; }
 	 .swiper-solu-d .item .txtb .intro { margin-top: 1em;}
 	 .swiper-solu-d .item .btnMore { margin-top: 1em;}
  }

.swiper-solu-d .btnNext,
.swiper-solu-d .btnPrev { position: absolute; z-index: 10; right: -4.37em; top: 50%;
	cursor: pointer; display: inline-block;
	width: 2.8em; height: 2.8em; margin-top: -1.4em;
	border: 1px solid #fff; background-color: #fff; border: 1px solid #cecece;
	transition: all 0.5s;
	-webkit-transition:all 0.5s; overflow: hidden;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
} 
.swiper-solu-d .btnPrev { left: -4.37em; right: auto;
transform: rotate(180deg);
-ms-transform: rotate(180deg); 
-webkit-transform: rotate(180deg); 
}
.swiper-solu-d .btnNext:hover,
.swiper-solu-d .btnPrev:hover {
	border: 1px solid #fff;	
}
.swiper-solu-d .btnPrev::before,
.swiper-solu-d .btnNext::before{
	content: ""; display: block;position: absolute; z-index: 1;
top: 0; left: 0; width: 100%; height: 100%;
background:  url(../images/arr_gray.png) center center no-repeat;
	background-size: 26.6% auto;
}
.swiper-solu-d .btnPrev:hover::before,
.swiper-solu-d .btnNext:hover::before {background-image:  url(../images/arr_white.png);}
.swiper-solu-d .btnNext::after,
.sswiper-solu-d .btnPrev::after{
	content: ""; display: block; position: absolute; z-index: -1;
	top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
	background-color: #058d7f;
	filter:alpha(opacity=0);-moz-opacity:0; opacity:0;
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
}
.swiper-solu-d .btnNext:hover::after,
.swiper-solu-d .btnPrev:hover::after{ filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
.swiper-solu-d .swiper-button-disabled {}
.swiper-solu-d .swiper-button-disabled,
.swiper-solu-d .swiper-button-disabled:hover{ 
filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;}
.swiper-solu-d .swiper-button-disabled:hover::before,
.swiper-solu-d .swiper-button-disabled:hover::before {background-image:  url(../images/arr_gray.png);}
.swiper-solu-d .swiper-button-disabled:hover::after,
.swiper-solu-d .swiper-button-disabled:hover::after{ filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}





 @media only screen and (max-width:1280px) { 
 .soluBox .tab { width:70%;}
 }
 
 @media only screen and (max-width:828px) { 
#i_banner .con { width: 100vw; margin: 0 5vw;}
#i_banner .pic { position: relative; z-index: 0; padding-top:100%;}
#i_banner .txtb { width: 100vw; top:22vw;}
#i_banner .txtb .txt { width: 80%; right: auto; left: 0;  }
#i_banner .txtb .txt .comp{ font-size: 4.2vw;}
#i_banner .txtb .txt .name { font-size: 3.6vw;}
#i_banner .txtb .txt .intro { font-size:2.4vw;}
#i_banner .txtb .txt .btn { font-size: 1.6vw; margin-top: 1.8em;}
#i_banner .btnNPW  { display:none;}
#i_banner .swiper-pagination { font-size: 2vw;}
#i_banner .swiper-pagination-bullet { width: 6px; height: 6px;}
#i_banner .txtb .txt .btnWhite { margin-top: 1.0em;}


.aboutBox { padding: 2.4em 0 2.4em;}
.aboutBox .conA { display: block;}
.aboutBox .conL { width: 100%;}
.aboutBox .conR { width: 100%; margin-top:1.6em;} 
.aboutBox .conL .listn { }
.aboutBox .conL .listn ul{ height: 100%; flex-wrap: wrap;  overflow:hidden; }
.aboutBox .conL .listn li{ float:left;  margin-right: 0.4em;  }

.starBox { padding: 2.4em 0 2.4em;}
.starBox .tit{   height:8em; margin-bottom:2em;  }
.starBox .tab {  top:3em; right:0em;   width:100%;}
.starBox .tab ul { flex-direction: row;   flex-wrap: wrap;  align-items:center; }  .starBox .tab ul li {  width:5.2em; margin:0.2em;}

.swiper-solu-d .btnPrev { background-color: #fff; left: -0.8em; width: 2.2em;  height: 2.2em; margin-top: -1.1em;}
.swiper-solu-d .btnNext {background-color: #fff; right: -0.5em; width: 2.2em;  height: 2.2em; margin-top: -1.1em;}
}

 @media only screen and (max-width:378px) { 
 .starBox .tab ul li {  width:4.2em; margin:0.3em;}
 }
