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

/*banner*/
#i_banner {  width: 100%; }
#i_banner .swiper-slide { position: relative; z-index: 0; }
#i_banner .swiper-slide .videoBox video {object-fit: cover;}
#i_banner .pic { position: relative; z-index: 0; padding-top: 525px;}
#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 .con { overflow: visible;}
#i_banner .txtb .txt { margin: -4em 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 .name {  font-weight: bold; line-height: 1.2;}
#i_banner .txtb .txt .intro { margin-left: 0.4em; margin-top: 1.4em; line-height: 1.2; 
overflow: hidden; height: 1.2em; color: rgba(255,255,255,0.5);}
#i_banner .txtb .txt .line {margin-left: 0.4em; width: 11.8em; height: 1px;
background-color: rgba(255,255,255,0.3); margin-top: 1em;}
#i_banner .txtb .txt .btn {margin-left: 0.4em; margin-top: 4em;}

#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 { bottom: 0.8em; }
#i_banner .swiper-pagination-bullet { width: 0.6em; height: 0.6em;
 background-color: #fff; margin: 0 0.3em !important;
 filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
}
#i_banner .swiper-pagination-bullet-active { position: relative; z-index: 0;
	 filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
}
#i_banner .btnNPW { position: absolute; right:7.8%;  bottom: 1.9em;
z-index: 1000;height: 2.8em; width:7.9em; text-align: center; }
#i_banner .btnNext,#i_banner .btnPrev { position: relative;
	cursor: pointer; display: inline-block;
	width: 3.1em; height: 3.1em; margin:0 0.3em;
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
	background:rgba(255,255,255,0.48) url(../images/arrow_2.png) center center no-repeat;
	background-size:36% auto;
} 
#i_banner .btnPrev { left: 5.2%; right: auto;
transform: rotate(180deg);
-ms-transform: rotate(180deg); 
-webkit-transform: rotate(180deg); 
}
#i_banner .btnNext:hover,
#i_banner .btnPrev:hover {
	background-color: #008cd6;
}

#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:1230px) {
	#i_banner .pic { position: relative; z-index: 0; padding-top: 42.6%;} 
}

 @media only screen and (max-width:828px) { 
#i_banner .con { width:  90vw; margin: 0 5vw;}
#i_banner .pic { position: relative; z-index: 0; }
#i_banner .txtb { width: 100vw;}
#i_banner .txtb .txt {  right: auto; left: 0;}
#i_banner .txtb .txt .name { font-size: 5.8vw;}
#i_banner .txtb .txt .intro { font-size:3.4vw;}
#i_banner .txtb .txt .btn { font-size: 2vw; margin-top: 1.8em;}

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

.proBox { width: 100%; padding: 4.1em 0 5.6em;}
.proBox .tit {display: flex; flex-wrap: wrap; 
justify-content: space-between; align-items: center}
.proBox .tit .name { text-align: left; color: #214a8c; font-weight: bold;}
.proBox .tit .links { flex-wrap: wrap; margin-left: 1em;}
.proBox .tit .links a { display: inline-block; margin: 0 0.5em; color: #737373;}

.proBox .conP { display: flex; justify-content: space-between; align-items: center;}
.proBox .txtb { margin-top: 3.5em; width: 32%; text-align: left;}
.proBox .picb { margin-top: 3.5em;  width: 58%;}
.proBox .txtb .tit_2 { line-height: 1.2;}
.proBox .txtb .name { margin-top: 0.6em; line-height: 1.3; font-weight: bold; color: #404040;}
.proBox .txtb .intro { margin-top: 1.2em;
	height: 4.5em;
	overflow: hidden;
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3; 
}

.proBox .list ul { 
display: flex; justify-content: flex-start; align-items: stretch;
flex-wrap: wrap;}
.proBox .list li { position: relative; z-index: 0; 
 width: 30.5%; margin: 2.3% 4.25% 0 0;}
.proBox .list li:nth-child(3n) { margin-right: 0;}
.proBox .list li .pic {position: relative; z-index: 0; padding-top:86.8%; height: 0; 
overflow: hidden;}
.proBox .list li .pic img { position: absolute; z-index: 1; left: 0; top: 0;
 width: 100%; height: 100%; object-fit: cover;
 transition: all 0.5s;
 -webkit-transition:all 0.5s;
}
.proBox .list li .txtb { position: absolute; z-index: 2; top:0;left: 0; 
bottom: 0; right: 0; padding: 2.4em 3em;
display: flex; flex-direction: column;
 justify-content: space-between; align-items: stretch;
text-align: left; color: #fff; 
 transition: all 0.5s;
 -webkit-transition:all 0.5s;
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#173f8f+0,173f8f+100&0.05+0,0.3+100 */
 background: linear-gradient(to right,  rgba(23,63,143,0.05) 0%,rgba(23,63,143,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.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 .txtb .name {}
.proBox .list li .txtb .name .ch { font-size: 1.57em; }
.proBox .list li .txtb .name .en { margin-top: 0.2em; text-transform: uppercase;}
.proBox .list li .txtb .name a { color: #fff;}


@media only screen and (max-width:828px) {
.proBox .tit { display: block;}
.proBox .tit .links { margin-top: 1em;}
.proBox .conP { display: block;}
.proBox  .txtb { width: 100%;}
.proBox  .picb { width: 100%; margin-top: 2em;}
}

.aboutTitBox {text-align: left; color: #214a8c; font-weight: bold;}
.aboutBox {margin-top: 3em; width: 100%; padding: 6.5em 0 5.6em; background-color: #f2f2f2;}
.aboutBox .conA { display: flex; justify-content: space-between; align-items: center;}
.aboutBox .txtb {  width: 44.5%; text-align: left;}
.aboutBox .picb {   width: 50.6%;}
.aboutBox .picb .pic {
    position: relative;
    z-index: 0;
    padding-top: 65.8%;
}

.aboutBox .txtb .name { color: #214a8c; line-height: 1.1; font-weight: bold;}
.aboutBox .txtb .name_2 { margin-top: 0.4em; color: #000; font-weight: bold;}
.aboutBox .txtb .intro {  margin-top: 0.2em;color: #000;}

@media only screen and (max-width:828px) {
.aboutBox .conA { display: block;}
.aboutBox  .txtb { width: 100%;margin-top: 2em;}
.aboutBox  .picb { width: 100%; }
}

.honorBox { padding: 3.5em 0;}
.honorBox .tit{ color: #214a8c; font-weight: bold;}
.honorBox .tit .line { width: 5.3em; height: 2px; display: block; margin: 0.6em auto;
background-color: #a6a3a4;}
.honorBox .tit .line::before { content: ""; display: block; height: 100%; width: 2em; margin: 0 auto 0 0;
background-color: #000;}

.swiper-honor { margin-top: 1.5em; padding-bottom: 2em;}
.swiper-honor .itemZ{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.swiper-honor .item { padding-bottom: 1em; color: #000; width: 25%;}
.swiper-honor .item:hover { background-color: #e5f3fe;}
.swiper-honor .item .picb { padding: 1em 1em 0.4em;}
.swiper-honor .item .picb .pic { padding-top: 72.7%; position: relative; z-index: 0;}
.swiper-honor .item .picb .pic img {position: absolute; z-index: 1; left: 0; top: 0;
 width: 100%; height: 100%; object-fit: contain;}
 
 @media only screen and (max-width:828px) {
	 .swiper-honor .item {  width: 50%;}
 }
.swiper-honor .swiper-pagination { bottom:0; }
.swiper-honor .swiper-pagination-bullet { width: 0.6em; height: 0.6em;
  background-color: #ccc; margin: 0 0.3em !important;
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
 -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
 }
.swiper-honor .swiper-pagination-bullet-active {  background-color: #999; position: relative; z-index: 0;
 	 filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
 }
 

.appBox { padding: 3.5em 0;}
.appBox .tit{ color: #214a8c; font-weight: bold;}
.appBox .tit .line { width: 5.3em; height: 2px; display: block; margin: 0.6em auto;
background-color: #a6a3a4;}
.appBox .tit .line::before { content: ""; display: block; height: 100%; width: 2em; margin: 0 auto 0 0;
background-color: #000;}

.swiper-app { margin-top: 1em; padding-bottom: 3em;}
.swiper-app .itemZ{display: flex; flex-wrap: wrap; 
justify-content: flex-start; align-items: flex-start;}
.swiper-app .item {  color: #000; width: 24.3%; margin:3% 0.93% 0 0;}
.swiper-app .item:nth-child(4n) { margin-right: 0;}
.swiper-app .item a { display: block; cursor: pointer;}
.swiper-app .item .pic { padding-top: 49.3%; position: relative; z-index: 0;}
.swiper-app .item .pic img {position: absolute; z-index: 1; left: 0; top: 0;
 width: 100%; height: 100%; object-fit: cover;}
.swiper-app .item .name  { line-height: 2.4em; padding: 0 0.5em;
 font-weight: bold; background-color: #214a8c; color: #fff;}
 
.swiper-app .swiper-pagination { bottom:0; }
.swiper-app .swiper-pagination-bullet { width: 0.6em; height: 0.6em;
  background-color: #ccc; margin: 0 0.3em !important;
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
 -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
 }
.swiper-app .swiper-pagination-bullet-active {  background-color: #999; position: relative; z-index: 0;
 	 filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
 }
 
  @media only screen and (max-width:828px) {
	  .swiper-app .item {  color: #000; width: 49.5%; margin:3% 1% 0 0;}
	  .swiper-app .item:nth-child(2n) { margin-right: 0;}
  }