@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: 100vh;}
#i_banner .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
object-fit: cover;}

#i_banner .txtb { position: absolute; left: 0; top: 6.7vw; bottom: 6.7vw; right: 0; right: 0;
display: flex; justify-content: center; align-items: center;}
#i_banner .txtb .txt { width: 51%; 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 .intro2 { font-weight:100; line-height: 1.2;  max-height: 2.4em;
overflow: hidden; text-transform: uppercase;}
#i_banner .txtb .txt .name { margin-top: 0.19em; font-weight: bold; 
line-height: 1.2; letter-spacing: 0.1em;}
#i_banner .txtb .txt .intro { margin-top: 0.8em; line-height: 1.2;  max-height: 2.4em;
overflow: hidden;}
#i_banner .txtb .txt .btn { margin-top: 2.1em;}
#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 { left: 9.3%; right: 9.3%; width: auto;
 bottom: 2.43em; display: flex; justify-content: flex-start; align-items: center;}
 #i_banner .swiper-pagination-bullet { flex: 1; height: 1px;
 -moz-border-radius:0; -webkit-border-radius:0; border-radius:0;
 background-color: #fff; margin: 0 !important;
 filter:alpha(opacity=60);-moz-opacity:0.6; opacity:0.6;
}
#i_banner .swiper-pagination-bullet-active {height: 2px; background-color: #058d7f;
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}


#i_banner .btnPrev:hover,
#i_banner .btnNext:hover { background-color: #0066cc; border: 1px solid #0066cc;}	
#i_banner .btnPrev:hover::before,
#i_banner .btnNext:hover::before{}

#i_banner .swiper-button-disabled,
#i_banner .swiper-button-disabled:hover { border: 1px solid #fff; background: transparent;}

#i_banner .num { position: absolute; z-index: 1000; left: 12.5%; color: #fff;bottom: 9em;}
#i_banner .num span.cur { font-size: 1.12em; color: #0066cc; font-weight: bold;}

/* @media only screen and (max-width:1920px) {

#i_banner .txtb .txt .name {font-size: 2vw; }
#i_banner .txtb .txt .intro { font-size: 1.25vw;}
} */
 @media only screen and (max-width:828px) { 
#i_banner .con { width: auto; margin: 0; width: 100%;}
#i_banner .pic { position: relative; z-index: 0; padding-top: 100%;}
#i_banner .txtb .txt { width: auto; margin: 0 1.5em;}
#i_banner .txtb .txt .intro2{ font-size: 3.2vw;}
#i_banner .txtb .txt .name { font-size: 5.8vw;}
#i_banner .txtb .txt .intro { font-size: 2.8vw;}
#i_banner .txtb .txt .btn { font-size: 2.4vw; margin-top: 1.8em;}
#i_banner .num { font-size: 10px; left: 2em; bottom: 3em;}
#i_banner .btnNPW  { font-size: 0.7em; right: 2em; bottom: 3em;}
#i_banner .swiper-pagination { font-size: 2vw;}
}

.charBox { margin-top: -7.3em; position: relative; z-index: 10; 
border: 1px solid #e1e4f3; background-color: #fff; padding: 2.3em 0;
-moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;
-moz-box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, .1);
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, .1);}
.charBox ul { display: flex; flex-wrap: wrap;
justify-content: space-around; align-items: flex-start;}
.charBox li { width: 19%; margin: 0 3%;}
.charBox .pic {}
.charBox .pic img{ margin: 0 auto; display: block; width: 4.25em; height: 4.25em;
object-fit: contain;}
.charBox .name { margin-top: 0.5em; font-size: 1.12em; color: #1a1d3c;}
.charBox .intro {margin-top: 0.4em; color: #7b7d89; line-height: 1.56;}

@media only screen and (max-width:828px) {
	.charBox { margin-top: -1em; }
	.charBox li { width: 40%;}
}

.servBox {  padding: 2.6em 0 4.8em;}
.servBox .tit { color: #1a1d3c;}
.servBox .tit2 { color: #646b97; margin-top: 0.2em;}

.servBox .item { background-color: #fafcff; border: 1px solid #e1e4f3;
 -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;
 padding: 10.8%; text-align: left;}
.servBox .item .pic {}
.servBox .item .pic img{ margin: 0 0 0 auto; display: block; width: 6.1em; height: 5.5em;
object-fit: contain;}
.servBox .item .name { margin-top: 0.3em; color: #1a1d3c; height: 1.5em; overflow: hidden;}
.servBox .item .intro {margin-top:1.3em; color: #7b7d89; line-height: 1.6;
height: 4.8em; overflow: hidden;}
.servBox .item .intro2 {margin-top: 0.8em; color: #41445d; line-height: 1.5;
height: 9em; opacity: inherit; padding-left: 1em;}
.servBox .item .intro2 p { position: relative; z-index: 0; margin-bottom: 0.75em;}
.servBox .item .intro2 p::before {
	  position: absolute; content: "-"; left: -0.8em; top: -0.25em;
	  color: #0066cc; font-size: 1.3em; font-weight: bold;
  }
.servBox .item .btnW { display: flex; justify-content: space-between; align-items: center;}
.servBox .item .btnW .btnGray { text-align: center; width: 45%; margin-top: 1.5em; 
padding-left: 0; padding-right: 0;}

.swiper-serv-w { position: relative; z-index: 0;}
.swiper-serv-w { margin-top: 2.5em;}
.swiper-serv-w .btnNext,.swiper-serv-w .btnPrev { position: absolute; top: 50%; 
margin-top: -1.5em;border: 1px solid #f2f3fa;
transition: all 0.5s;
-webkit-transition:all 0.5s;} 
.swiper-serv-w .btnNext::before,.swiper-serv-w .btnPrev::before {
	background-image: url(../images/arrow_2.png);
}

.swiper-serv-w .btnNext { right: -4.8em; left: auto;}
.swiper-serv-w .btnPrev {left: -4.8em; right: auto;}
.swiper-serv-w .btnNext:hover,.swiper-serv-w .btnPrev:hover {
	background-color: #646b97;}
.swiper-serv-w .btnNext:hover::before,.swiper-serv-w .btnPrev:hover::before {
	background-image: url(../images/arrow.png);
}

.matrBox { margin: 0 auto 0; padding: 3.5em 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5f2fe+0,ffffff+100 */
background: linear-gradient(to bottom,  rgba(229,242,254,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.matrBox .tit { color: #1a1d3c;}
.matrBox .tit2 { color: #646b97; margin-top: 0.2em;}
.matrBox .pic { margin-top: 2.3em;}
.matrBox .pic img { max-width: 1348px; margin: 0 auto; display: block; width: 100%; height: auto;}
.matrBox .btnW { margin-top: 6.2em;}

.soluBox { margin: 0 auto 0; padding: 3.5em 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5f2fe+0,ffffff+100 */
background: linear-gradient(to bottom,  rgba(229,242,254,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.soluBox .tit { color: #1a1d3c;}
.soluBox .tit2 { color: #646b97; margin-top: 0.2em;}

.soluBox .soluCon { margin-top: 2em; display: flex; flex-direction: row-reverse; 
justify-content: space-between; align-items: stretch;}
.soluBox .soluCon .tab { width: 49.6%;}
.soluBox .soluCon .tab ul { display: flex;flex-wrap: wrap; justify-content: space-between;
align-items: stretch;}
.soluBox .soluCon .tab li { position: relative; z-index: 0;
	cursor: pointer; color: #1a1d3c; width: 49.2%; display: flex;
 justify-content: flex-start; align-items: center; height: 7.2em;
 border: 1px solid #e1e4f3; margin-top: 0.27em; background-color: #fff;
 -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;}
 .soluBox .soluCon .tab li:nth-child(1),
 .soluBox .soluCon .tab li:nth-child(2) { margin-top: 0;}
.soluBox .soluCon .tab li .pics { margin: 0 1.66em 0 2.1em; width: 4em; height: 4em;
display: flex; justify-content: center; align-items: center;}
.soluBox .soluCon .tab li .pics  img { display: block;
max-width: 100%; max-width: 100%; width: auto; height: auto;}
.soluBox .soluCon .tab li .pics  img:nth-child(2) { display: none;}
.soluBox .soluCon .tab li.cur { color: #fff; background-color: #0066cc;}
.soluBox .soluCon .tab li .num { font-size: 0.88em; position: absolute; top: 1.5em; right: 2.25em; color: #0066cc;}
.soluBox .soluCon .tab li .arrow {  position: absolute;
 bottom: 1.5em; right: 2.25em; width: 0.7em; height: 0.7em;
 background: url(../images/arrow_2.png) center center no-repeat;
 background-size:contain ;
 transform: rotate(180deg);
 -ms-transform: rotate(180deg); /* IE 9 */
 -webkit-transform: rotate(180deg); /* Safari and Chrome */}

.soluBox .soluCon .tab li.cur .num { color: #fff;}
.soluBox .soluCon .tab li.cur .name { font-weight: bold;}
.soluBox .soluCon .tab li.cur .pics  img:nth-child(1) { display: none;}
.soluBox .soluCon .tab li.cur .pics  img:nth-child(2) { display: block;}
.soluBox .soluCon .tab li.cur .arrow {background-image: url(../images/arrow.png);}

.soluBox .soluCon .conSZ { width: 49.9%;
 border: 1px solid #e1e4f3;  
 -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f9fbff+100 */
 background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(249,251,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.soluBox .soluCon .conSZ .conS {display: none;}
.soluBox .soluCon .conSZ .conS:first-child { display: block;}
.soluBox .soluCon .conC { display: flex;
 justify-content: space-between; align-items: stretch;
 padding: 9.7% 6% 9.7% 9.7%; text-align: left;}
 
 .soluBox .soluCon .conC .txtb { width: 25.8%;
 display: flex;flex-direction: column;
  justify-content: space-between; align-items: stretch;}
  .soluBox .soluCon .conC .txtb .num { color: #0066cc; font-weight: bold;}
  .soluBox .soluCon .conC .txtb .name { margin-top: 0.2em;}
  
   .soluBox .soluCon .conC .txtb .pics img {
	   display: block; width: 100%; height: auto;
	   margin: 0 auto 0 0; max-width: 144px;
   }
 .soluBox .soluCon .conC .txtb2 { width: 63.1%; color: #717890;}
  .soluBox .soluCon .conC .txtb2 .intro { padding-left: 1em;}
 .soluBox .soluCon .conC .txtb2 .intro p { margin-bottom: 1.2em;
  position: relative; z-index: 0;}
  .soluBox .soluCon .conC .txtb2 .intro p::before {
	  position: absolute; content: "-"; left: -1em; top: -0.2em;
	  color: #0066cc; font-size: 1.3em; font-weight: bold;
  }
  .soluBox .soluCon .conC .btnW { display: flex;
   justify-content: space-between; align-items: center;}
  .soluBox .soluCon .conC .btnW .btnGray { text-align: center; width: 45%; margin-top: 1.3em; 
  padding-left: 0; padding-right: 0;}

 @media only screen and (max-width:828px) { 
	.soluBox .soluCon { display: block; }
	.soluBox .soluCon .tab { width: 100%;}
	.soluBox .soluCon .conSZ { margin-top: 0.5em; width: 100%;} 
	.soluBox .soluCon .conC { display: block;}
	.soluBox .soluCon .conC .txtb .pics { margin-top: 1.5em;} 
	 .soluBox .soluCon .conC .txtb { width: 100%;}
	 .soluBox .soluCon .conC .txtb2 { margin-top: 2em; width: 100%;}
	 .soluBox .soluCon .tab li { height: 6em;}
	 .soluBox .soluCon .tab li .pics { margin: 0 0.8em 0 1em; width: 3em; height: 3em;}
	 .soluBox .soluCon .tab li .num { right: 1em;}
	 .soluBox .soluCon .tab li .arrow { right: 1em;}
 }


.newBox { margin: 0 auto 0; padding: 2.2em 0 3.5em;}
.newBox .tit { color: #1a1d3c;}
.newBox .tit2 { color: #646b97; margin-top: 0.2em;}
.newBox .newCon {}
.newBox .tab { margin-top: 0.5em; }
.newBox .tab ul { line-height: 2.5; display: flex; justify-content:center; align-items: stretch;}
.newBox .tab ul li { cursor: pointer; margin: 0 1.2em; padding: 0 1.2em ; color: #646b97; }
.newBox .tab ul li::after { content: ""; display: block;
height: 0.15em; width: 1.25em; margin: 0 auto;}
.newBox .tab ul li.cur { font-weight: bold;  color: #0066cc;}
.newBox .tab ul li.cur::after { background-color: #0066cc;}
.newBox .conN { display: none;}
.newBox .conN:first-child {display: block;}

.newBox .conC { display: flex; justify-content: space-between; align-items:center;
 color: #1a1d3c;}
 .newBox .list { margin-top: 2em;}
 .newBox .list li { display: flex; justify-content: space-between; align-items: center;
 border: 1px solid #e1e4f3; background-color: #fefeff;
 padding: 2.3% 3.5% 2.3% 3.3%;
 -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;
 }
.newBox .list .txtb { flex: 1; margin-right: 6.6%; text-align: left;}
.newBox .list .txtb .name { color: #1a1d3c;overflow: hidden;
text-overflow:ellipsis; height: 1.5em;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:1; }
.newBox .list .txtb .name a {color: #1a1d3c;}
.newBox .list .txtb .name a:hover {color: #0066cc;}
.newBox .list .txtb .intro { margin-top: 1em; color: #646b97; line-height: 1.9em;
height: 5.7em; overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:3; }
.newBox .list .txtb .date { position: relative; z-index: 0;
 margin-top: 1.4em; color: #a7acbd; padding-left: 1em;}
.newBox .list .txtb .date::before { content: ""; display: block;
width: 0.3em; height: 0.3em; background-color: #0066cc;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
position: absolute; left: 0; top: 50%; margin-top: -0.19em;
}
.newBox .list .picb { width: 27.4%;}
.newBox .list .picb .pic { padding-top: 64.2%; position: relative; z-index: 0;
-moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;
overflow: hidden;}
.newBox .list .picb .pic img { position: absolute; left: 0; top: 0;
 width: 100%; height: 100%; object-fit: cover;}
 
 .newBox .list2 ul { display: flex; flex-wrap: wrap; justify-content: space-between;
 align-items: stretch;}
 .newBox .list2 ul li { margin-top: 0.62em; display: flex; justify-content: space-between; align-items: center;
 border: 1px solid #e1e4f3; background-color: #fefeff; text-align: left;
 width: 49.2%;
 padding: 2.3% 0 2.3% 0;
 -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;
 }
.newBox .list2 ul li .name { position: relative; z-index: 0; flex: 1;
 margin-left: 7.3%; color: #4e5062; padding-left: 1em; margin-right: 1em;
 overflow: hidden;
 text-overflow:ellipsis; height: 1.5em;
 display:-webkit-box; 
 -webkit-box-orient:vertical;
 -webkit-line-clamp:1;}
.newBox .list2 ul li .name::before { content: ""; display: block;
width: 0.3em; height: 0.3em; background-color: #0066cc;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
position: absolute; left: 0; top: 50%; margin-top: -0.19em;
}
.newBox .list2 ul li .name a {color: #4e5062;}
.newBox .list2 ul li .name a:hover {color: #0066cc;}
.newBox .list2 ul li .date { margin-right:5.6% ;color: #a7acbd;}

@media only screen and (max-width:828px) {
	.newBox .tab ul li { margin: 0 0.5em; padding: 0 0.5em;}
	.newBox .list2 ul { display: block;}
	.newBox .list2 ul li { 
	width: 100%;
	padding: 2.3% 0 2.3% 0;}
	.newBox .list .txtb .intro { display: none;}
	.newBox .list .txtb .name { font-size: 1.1em;}
	.newBox .list .txtb .date { margin-top: 0.5em;}
	.newBox .list .picb { width: 8em;}
}