@charset "utf-8";
/* CSS Document */

/*banner*/
#i_banner { background-color: #e4ebe5; position: relative; z-index: 0;}
#i_banner .swiper-slide { position: relative; z-index: 0;}
#i_banner .pic { position: relative; z-index: 0; padding-top:720px;}
#i_banner .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
object-fit: cover;}

#i_banner .txtb { position: absolute; z-index: 1; left: 0; right: 0;  width: 100%; top: 0; height: 100%;
display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff;}
#i_banner .txtb .con { width: 100%;}
#i_banner .txtb .name { }
#i_banner .txtb .intro { margin-top: 0.2em;}
#i_banner .txtb .intro::before { position: relative; top: -0.1em;
	vertical-align: middle; content: ""; display: inline-block; width: 3em; height: 2px;
background-color: #fff; margin: 0 0.5em;}
#i_banner .txtb .intro::after {  position: relative; top: -0.1em;
vertical-align: middle;content: ""; display: inline-block; width: 3em; height: 2px;
background-color: #fff;margin: 0 0.5em;}
#i_banner .txtb .btnW { margin-top: 3em;}

#i_banner .txtb .btnW .btnBlue {transition: all 0.5s;
-webkit-transition:all 0.5s;}
#i_banner .txtb .btnW .btnBlue:hover {
	transform: translate(0,-3px);
	-ms-transform: translate(0,-3px); /* IE 9 */
	-webkit-transform: translate(0,-3px); /* Safari and Chrome */
}

#i_banner .swiper-pagination {
 bottom: 1.8em; left: 0; right: 0;
   display: flex; justify-content:center; align-items: center;}
#i_banner .swiper-pagination-bullet { width: 3.1em; height: 0.4em;
 background-color: #fff; margin: 0 0.3em !important;
 filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
 -moz-border-radius:0; -webkit-border-radius:0; border-radius:0;
}
#i_banner .swiper-pagination-bullet-active {
	background-color: #007aff;
	filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
}

#i_banner .btnNPW { position: absolute; width:100%;  bottom: 50%;
z-index: 1000;height: 2.8em; text-align: center; }

#i_banner .btnNext { position: relative;
	cursor: pointer; display: inline-block;
	width:2.6em; height: 2.6em; margin:0 0.1em;position: absolute;right:0;
	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 .btnPrev { position: relative;
	cursor: pointer; display: inline-block;
	width:2.6em; height: 2.6em; margin:0 0.1em;position: absolute;left:0;
	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 .btnPrev {
transform: rotate(180deg);
-ms-transform: rotate(180deg); 
-webkit-transform: rotate(180deg); 
}
#i_banner .btnNext:hover,
#i_banner .btnPrev: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;}

@media only screen and (max-width:1200px) { 
	#i_banner .pic { padding-top: 60%;}	
}
@media only screen and (max-width:828px) { 
#i_banner .con { width:  90vw; margin: 0 5vw;}
#i_banner .txtb .name { font-size: 6.7vw;}
#i_banner .txtb .intro { font-size: 3.4vw;}

#i_banner .txtb .btnW { margin-top: 1.5em;}

#i_banner .swiper-pagination { font-size: 2vw;}
#i_banner .swiper-pagination-bullet { width: 6px; height: 6px;}
}


.introBox {  padding: 3.75em 0 3.75em;}
 .introBox .tit { color: #000; text-align: left;}
 .introBox .tit::after { display: block; content: ""; display: block; width: 2.8em; margin: 0.2em auto 0 0;
 height: 0.14em; background-color: #0071ff;}
 .introBox .tit .line { color: #585858; margin-left: 0.3em;}
.introBox .tit2{ margin-top: 1.2em; text-align: left; color: #333; }
.introBox .list ul { display: flex; flex-wrap: wrap; justify-content:space-between;
align-items: stretch;}
.introBox .list li { position: relative; z-index: 0; width: 24%; margin-right: 1.33%; margin-top:2em; overflow: hidden;}
.introBox .list li:nth-child(4n) { margin-right: 0%;}
.introBox .list .pic { display: block; cursor: pointer; position: relative; z-index: 0; padding-top: 125%;}
.introBox .list .pic img { position: absolute; z-index: 1; left: 0; top: 0;
 display:block; width: 100%; height:100% ; object-fit: cover;}
 
.introBox .list .pics  {content: "";display: block; position: absolute; z-index: 2;
  left:50%; top: 50%;  width: 3.5em; height:3.5em; margin-top:-3.4em; margin-left:-1.75em;}
.introBox .list .pics img { width: 3.5em; height:3.5em;}
 .introBox .list li:hover .pics { display: none;}
 
/* .introBox .list .pic:hover::after { content: "";display: block; position: absolute; z-index: 2;
 left: 0; top: 0;
  display:block; width: 100%; height:100% ;
  background: rgba(22,91,188,0.6) url(../images/arrow.png) center center no-repeat;
  background-size:3.1em auto ;
 } */
.introBox .list .txtb { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;  text-align: center; 
background-color: rgba(0,0,0,0.5); color: #fff; padding: 1em 1em 0.8em;}
.introBox .list .name {  height: 1.3em; overflow: hidden;line-height: 1.3;}
.introBox .list .en { color: rgba(255,255,255,0.5); line-height: 1.3;}
.introBox .list .txtb2 { position: absolute; z-index: 4;
left: 0; right: 0; top: 100%; height: 100%;
 display: flex; flex-direction: column; 
background: rgba(22,91,188,0.6); 
line-height: 2.6em;
transition: all 0.3s;
-webkit-transition:all 0.3s;}
.introBox .list li:hover .txtb2 { top: 0; }
.introBox .list .txtb2 .subList { flex: 1; display: flex; flex-direction: column; 
justify-content: center; align-items: center; padding-bottom: 4em;}
.introBox .list .txtb2 a { border-bottom: 1px solid rgba(255,255,255,0.2); color: #fff; 
display: inline-block; cursor: pointer;}

.introBox .btnWhite  {display: block; margin-top: 2.5em;}
@media only screen and (max-width:828px) { 
	.introBox .list li { width: 49.25%; margin-top: 3%; }
	.introBox .list li:nth-child(2n) { margin-right: 0;}
	.introBox {  padding: 1.75em 0 3.75em;}
}


.proBox { overflow: hidden; padding: 3.3em 0 3.3em; position: relative; z-index: 0;
}
.proBox::after { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
content: ""; display: block;
	background: #afc9ee url(../images/pro_bg.png) center center no-repeat;
background-size:cover;
transition: all 0.3s;
-webkit-transition:all 0.3s;}
.proBox.hover::after {
	-ms-transform: scale(1.06, 1.06);
		-webkit-transform: scale(1.06, 1.06);
		transform: scale(1.06, 1.06);
}
.proBox .titW {  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center}
.proBox .tit { color: #000; text-align: left;}
.proBox .tit::after { display: block; content: ""; display: block; width: 2.8em; margin: 0.2em auto 0 0;
 height: 0.14em; background-color: #0071ff;}
.proBox .tit .line { color: #585858; margin-left: 0.3em;}
.proBox .tab {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.proBox .tab li { cursor: pointer; margin-left: 1.5em; background-color: #fff; line-height: 2.5em; padding: 0 1.8em;
-moz-border-radius:1.5em; -webkit-border-radius:1.5em; border-radius:1.5em;}
.proBox .tab li.cur { background-color: #007aff; color: #fff;}
.proBox .conP{display: none; }
.proBox .conP.show{ display: block; }
.proBox .list ul { display: flex; flex-wrap: wrap; justify-content:space-between;
align-items: stretch;}
.proBox .list li { width: 28%; margin-right: 8%; margin-top: 2.8em; }
.proBox .list li:nth-child(3n) { margin-right: 0%;}
.proBox .list .pic { display: block; cursor: pointer; position: relative; z-index: 0; padding-top: 100%;
overflow: hidden;}
.proBox .list .pic img { position: absolute; z-index: 1; left: 0; top: 0;
 display:block; width: 100%; height:100% ; object-fit: cover;
 transition: all 0.3s;
 -webkit-transition:all 0.3s;}
.proBox .list .pic:after { content: "";display: block; position: absolute; z-index: 2;
 left: 0; top: 0;
  display:block; width: 100%; height:100% ;
  background: rgba(22,91,188,0.6) url(../images/arrow.png) center center no-repeat;
  background-size:3.1em auto ;
  transition: all 0.3s;
  -webkit-transition:all 0.3s;
  filter:alpha(opacity=0);-moz-opacity:0; opacity:0;
  }
.proBox .list li:hover .pic img {
	-ms-transform: scale(1.03, 1.03);
		-webkit-transform: scale(1.03, 1.03);
		transform: scale(1.03, 1.03);
}
.proBox .list li:hover .pic::after {
	filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
 }
.proBox .list .txtb {  text-align: left; }
.proBox .list .name { margin-top: 0.6em; color: #000;  }

.proBox .btnWhite  {display: block; margin-top: 2.5em;}

@media only screen and (max-width:1080px) { 
	.proBox .titW { display: block;}
	.proBox .tab { justify-content: flex-end;}
	.proBox .tab li {margin-top: 1.5em; }
}

@media only screen and (max-width:828px) { 
	.proBox .list li { width: 30.66%; margin-right: 4%; }
}

@media only screen and (max-width:480px) { 
	.proBox .list li { width: 100%; margin-right: auto; }
}

@media only screen and (max-width:380px) { 
	.proBox .tab li { margin-left: 0.5em; padding: 0 0.9em;}
}


 .soluBox {  padding: 4em 0 4em;}
 .soluBox .tit { color: #000; text-align: left;}
 .soluBox .tit::after { display: block; content: ""; display: block; width: 2.8em; margin: 0.2em auto 0 0;
 height: 0.14em; background-color: #0071ff;}
 .soluBox .tit .line { color: #585858; margin-left: 0.3em;}
 
 .soluBox .list ul { display: flex; flex-wrap: wrap; justify-content:space-between;
 align-items: stretch;}
 .soluBox .list li { width: 31.6%; margin-right: 2.6%; margin-top: 2.6%;}
 .soluBox .list li:nth-child(3n) { margin-right: 0;}

 .soluBox .list .txtb { position: relative; z-index: 0;
  display: block; cursor: pointer; padding: 7% 7.9%; text-align: left; 
 border: 1px solid #d9dee2; overflow: hidden;
 }
 .soluBox .list .txtb::after { position: absolute; z-index: -1;
 right: 0; bottom: 0; content: ""; display: block;
 width: 100%; height: 100%;
 background: #f5f7fa url(../images/solu_li_bg.png) right bottom no-repeat;
 background-size:6.25em auto ;
 transition: all 0.3s;
 -webkit-transition:all 0.3s;
 }
 .soluBox .list .txtb:hover::after {
	   background-size:7em auto ;
 }
 .soluBox .list .name { font-weight: bold; color: #000;  height: 1.5em; overflow: hidden;
 transition: all 0.3s;
 -webkit-transition:all 0.3s;}
.soluBox .list .txtb:hover .name { color: #007aff;}
 .soluBox .list .line { display: block; content: "";  width: 2.8em; margin: 0.6em auto 0 0;
 height: 2px; background-color: #0071ff;}
 .soluBox .list .intro { margin-top: 0.9em; color: #333; text-align: left; line-height: 1.4;
 height: 7em; overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;}
 .soluBox .list .about {color: #9a9a9a; margin-top: 2.3em;}
 .soluBox .list .about .author { display: inline-block; margin:0 1em 0 0;}
 .soluBox .list .about .time { display: inline-block;}
 
 @media only screen and (max-width:828px) { 
 	.soluBox .list li { width: 100%; }
 }


.cenBox { padding: 6.2em 0; background: #4083df url(../images/cen_bg.png) center center no-repeat;
background-size:cover ; color: #fff;}
.cenBox .list ul { display: flex; flex-wrap: wrap;justify-content: space-around; align-items: center;}
.cenBox .list li { padding: 2em 0; margin-right: 1em; }
.cenBox .list li:last-child { margin-right: 0;}
.cenBox .list ul img { margin: 0 auto 0; width: 4em; height: 4em;transition: all 0.5s;
-webkit-transition:all 0.5s;}
.cenBox .list ul a:hover img  {
	transform: rotate(360deg);
	-ms-transform: rotate(360deg); /* IE 9 */
	-webkit-transform: rotate(360deg); /* Safari and Chrome */
}
.cenBox .list a { display: inline-block; cursor: pointer; color: #fff;
	transition: all 0.3s;
	-webkit-transition:all 0.3s;
}
.cenBox .list a:hover { color: #dbe9fd;
transform: translate(0,-5px);
	-ms-transform: translate(0,-5px); /* IE 9 */
	-webkit-transform: translate(0,-5px); /* Safari and Chrome */
}
.cenBox .list .name {display: block; margin-top: 0.1em;}
.cenBox .list .en { display: block;}

.newBox {  padding: 4em 0 4em;}
.newBox .tit { color: #000; text-align: left;}
.newBox .tit::after { display: block; content: ""; display: block; width: 2.8em; margin: 0.2em auto 0 0;
height: 0.14em; background-color: #0071ff;}
.newBox .tit .name {}
.newBox .tit .line { color: #585858; margin-left: 0.3em;}

.newBox .list ul { display: flex; flex-wrap: wrap; justify-content:space-between;
align-items: stretch;}
.newBox .list li { width: 48.3%; margin-top: 2.8em; 
display: flex;  justify-content:flex-start; align-items: flex-start;}
.newBox .list .picb { width: 17.1em;}
.newBox .list .pic { display: block; cursor: pointer; position: relative; z-index: 0; padding-top: 62.5%;
overflow: hidden;}
.newBox .list .pic img { position: absolute; z-index: 1; left: 0; top: 0;
 display:block; width: 100%; height:100% ; object-fit: cover;
 transition: all 0.3s;
 -webkit-transition:all 0.3s;}
 .newBox .list li:hover .pic img {
	 -ms-transform: scale(1.03, 1.03);
	 	-webkit-transform: scale(1.03, 1.03);
	 	transform: scale(1.03, 1.03);
 }
.newBox .list li .pic::after { content: "";display: block; position: absolute; z-index: 2;
 left: 0; top: 0;
  display:block; width: 100%; height:100% ;
  background: rgba(22,91,188,0.6) url(../images/arrow.png) center center no-repeat;
  background-size:4em auto ;
  transition: all 0.3s;
  -webkit-transition:all 0.3s;
  filter:alpha(opacity=0);-moz-opacity:0; opacity:0;
 }
.newBox .list li:hover .pic::after {
	filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
 }
.newBox .list .txtb { flex: 1; margin-left: 1.4em;  text-align: left; }
.newBox .list .name { font-weight: bold; color: #000;  height: 1.5em; overflow: hidden;}
.newBox .list .txtb a:hover .name{color:#0071ff;}
.newBox .list .intro { margin-top: 0.7em; color: #9a9a9a; text-align: left; line-height: 1.4;
height: 4.2em; overflow: hidden;
 text-overflow:ellipsis;
 display:-webkit-box; 
 -webkit-box-orient:vertical;
 -webkit-line-clamp:3;}
.newBox .list .about {color: #9a9a9a; margin-top: 2.3em;}
.newBox .list .about .author { display: inline-block; margin:0 1em 0 0;}
.newBox .list .about .time { display: inline-block;}
.newBox .btnGray  {display: block; margin-top: 2.5em;}
@media only screen and (max-width:828px) { 
	.newBox .list li { width: 100%; }
	#i_banner .btnNPW{display:none;}
	
}

 @media only screen and (max-width:540px) {
	 .newBox .list .picb { width: 12em;}
	 .newBox .list .txtb { margin-left: 1em;}
	 .newBox .list .intro { -webkit-line-clamp:2;height: 2.8em; }
	 .newBox .list .about { margin-top: 0.4em;}
 }