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

/*banner*/
#i_banner { position: relative; z-index: 0;}
#i_banner .swiper-slide { position: relative; z-index: 0;}
#i_banner a { display: block; position: relative;}
#i_banner .bg { width: 100%;}
#i_banner .bg img { width: 100%; }

#i_banner .txtb { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10;
display: flex; justify-content: center; align-items: center;}
#i_banner .txtb .txt {font-family: "Montserrat-Bold";
	font-weight: bold; color: rgba(255,255,255,0.9); line-height: 1.2;
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 .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: 1.5vw;}
#i_banner .swiper-pagination-bullet-active { background-color: #4ba870;}

#i_banner .btnNext,#i_banner .btnPrev {
	position: absolute; z-index: 10; left: auto; top: 50%; margin-top: -1.4vw;
	right: 5.2%; cursor: pointer;
	width: 2.8vw; height: 2.8vw;
	background: rgba(255,255,255,0.5) url(../images/arrow.png) center center no-repeat;
	background-size: 20% auto;
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
} 
#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: #ee352a
}
 @media only screen and (max-width:828px) {
#i_banner .pic { position: relative; z-index: 0; padding-top: 60%;}
}
.proBox { padding: 5.2% 0;}
.proBox .tit { color: #222; font-weight: bold;}
.swiper_spe_w { position: relative; z-index: 0; margin: 3.5% 6.5% 0; color: #222;}
.swiper_spe .pic img { width: 3.33em; height: 3.33em;display: block; margin: 0 auto;
object-fit: contain;}
.swiper_spe .name { margin-top: 0.8em;}
.swiper_spe .swiper-slide { cursor: pointer; width: 20%;}
.swiper_spe .swiper-slide.cur .name { font-weight: bold; color: #ee352a;}

@media only screen and (max-width:828px) {
	.swiper_spe .name { margin: 0.8em 0.5em 0; font-size: 12px;}
	.swiper_spe .pic { margin-top:1em;}
}

.swiper_spe_w .btnNext,.swiper_spe_w .btnPrev {
	position: absolute; z-index: 10; left: auto; top: 50%; margin-top: -1.4vw;
	right:-1%; cursor: pointer;
	width: 2.25vw; height: 2.25vw;
	background:  url(../images/arrow_2.png) center center no-repeat;
	background-size: contain;
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
} 
.swiper_spe_w .btnPrev { left: -1%; right: auto;
transform: rotate(180deg);
-ms-transform: rotate(180deg); 
-webkit-transform: rotate(180deg); 
}
.swiper_spe_w .btnNext:hover,.swiper_spe_w .btnPrev:hover {
	background-image:  url(../images/arrow_3.png)
}

.proBox .btnW { margin-top: 4%;}

.appBox { padding: 4.3% 0 3.9%; background-color: #f8fafb;}
.appBox .tit { color: #222; font-weight: bold;}
.appBox .list ul { margin: 1.3% auto 0; padding-bottom: 4.5%; display: flex; flex-wrap: wrap;
justify-content: flex-start; align-items: stretch;}
.appBox .list ul li { width: 18.66%; margin-top: 1.67%; margin-right: 1.67%;
 background-color: #fff;
 transition: all 0.5s;
 -webkit-transition:all 0.5s;}
 .appBox .list ul li:nth-child(5) { margin-right: 0;}
 .appBox .list ul li:hover { 
	 background: #ea352a url(../images/app_bg.png) center bottom no-repeat;
	 background-size:100% auto;
  color: #fff;}
 .appBox .list ul li:hover .btn  {
	margin-left: 0;
 }
.appBox .list .lib { padding:17.8% 13.7% 13.9%; text-align: left;}
.appBox .list .pic {height: 4.5em; position: relative; z-index: 0;}
.appBox .list .pic img { width: auto; height: 4.5em;display: block; margin: 0 auto 0 0;
object-fit: contain;
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.
 transition: all 0.5s;
 -webkit-transition:all 0.5s;}
.appBox .list .pic img:nth-child(2) { position: absolute; left: 0; height: 100%; top: 0; left: 0;
filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
.appBox .list li:hover .pic img:nth-child(1) { filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
.appBox .list li:hover .pic img:nth-child(2) { 
filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
}
.appBox .list .name { margin-top: 1.2em; color: #222; line-height: 1.1;
 transition: all 0.5s;
 -webkit-transition:all 0.5s;}
.appBox .list li:hover .name { color: #fff;}
.appBox .list .nameEn { margin-top: 0.8em; color: #ddd;line-height: 1.2;
 transition: all 0.5s;
 -webkit-transition:all 0.5s; min-height:50px;}
.appBox .list li:hover .nameEn { color: rgba(255,255,255,0.2);}
.appBox .list .intro { margin-top:10%; color: #fff; line-height: 1.8;
height: 7.2em; overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:4; }
.appBox .list .btn {
	transition: all 0.5s;
	cursor: pointer; color: #ee352a; padding:0 1.1em; line-height: 2.2em;
 background-color: #fff; margin: 10% auto 0 0; display: inline-block;
-moz-border-radius:1.2em; -webkit-border-radius:1.2em; border-radius:1.2em; margin-left:-1.1em;}
/* .appBox .list .btn:hover{ margin-left:-0em} */
 @media only screen and (max-width:828px) {
	 .appBox .list ul li { width: 100%; margin-top: 1.6%; margin-right: 0;
	 }
	 .appBox .list ul li:nth-child(2n) { margin-right: 0;}
	 .appBox .list ul li:nth-child(5) { margin-right: 0; width: 100%;}
 }


.newBox { padding: 4.9% 0 6%;}
.newBox .tit { color: #222; font-weight: bold;}
.newBox .con { margin-top: 3.8%; display: flex; justify-content:space-between; align-items:stretch;}
.newBox .list1 { width: 48%; text-align: left;}
.newBox .list1 .pic { display: block; cursor: pointer;
 padding-top: 58.33%; position: relative; z-index: 0;}
.newBox .list1 .pic img { position: absolute; left: 0; top: 0;
width: 100%; height: 100%; object-fit: cover;}
.newBox .list1 .name { margin-top:1em; line-height: 1.75em; height: 3.5em; overflow: hidden;
overflow: hidden; text-align: left;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; }
.newBox .list1 .moreBtn { margin-top: 1.2em;}
.newBox .list2 { width: 46%;}
.newBox .list2 ul { height: 100%; display: flex; flex-direction: column;
justify-content: space-between; align-items: stretch;}
.newBox .list2 li { flex: 1; border-bottom:1px solid #ddd; padding: 0.8em 0;
 display: flex; justify-content: center; align-items: center;
	}
.newBox .list2 .lib { width: 100%; display: flex; justify-content: space-between; align-items: flex-start}
.newBox .list2 .date { color: #999; line-height: 2.5;}
.newBox .list2 .name { flex: 1; margin-right: 0.8em; line-height: 1.75em; max-height: 3.5em; overflow: hidden;
overflow: hidden; text-align: left;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; }
 @media only screen and (max-width:828px) {
	 .newBox .con  { display: block;}
	 .newBox .list1 { width: 100%;}
	 .newBox .list2 { width: 100%;}
 }


.aboutBox { background-color: #f8fafb; padding: 6.3% 0 4.6%;}
.aboutBox .con { overflow: visible;}
.aboutBox .conA { display: flex; justify-content: space-between; align-items: center;}
.aboutBox .conA  .picb { width: 52%;}
.aboutBox .conA  .picb  .pic { padding-top: 74.3%; position: relative; z-index: 0;}
.aboutBox .conA  .picb  .pic img { position: absolute; left: 0; top: 0;
width: 100%; height: 100%;
object-fit: cover;}
.aboutBox .conA  .txtb { flex: 1; margin-left: -3.6%; 
position: relative; z-index: 1; background-color: #fff;
-moz-box-shadow: 0 0.4em 1.72em rgba(0, 39, 54, .13);
-webkit-box-shadow: 0 0.4em 1.72em rgba(0, 0, 0, .13);
box-shadow: 0 0.4em 1.72em rgba(0, 0, 0, .13);}
.aboutBox .conA  .txtb .txtc { padding: 8% 11.3%; text-align: left;}
.aboutBox .conA  .txtb .name { font-weight: bold;}
.aboutBox .conA  .txtb .txt { line-height: 1.8; margin-top: 5.8%;}
.aboutBox .conA  .txtb .moreBtn {margin: 5.8% auto 0 0; line-height: 2.5;}

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