@charset "utf-8";
/* CSS Document */
.wrap {border-top:0;}
/*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: 700px;}
#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: 7vw; bottom: 1vw; right: 0; right: 0;
display: flex; justify-content: center; align-items: center;}
#i_banner .txtb .txt { width:43.6%; margin: 0 auto 0; text-align: center;
 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 {  line-height: 1.6;}
#i_banner .txtb .txt .intro { margin-top:1.4em; line-height: 1.6; 
overflow: hidden; color: rgba(255,255,255,0.7);}
#i_banner .txtb .txt .btn { margin-top: 3.6em;}
#i_banner .txtb .txt_2 {margin: 0 auto 0 0; width:62%; text-align: left; }
#i_banner .txtb .txt_2 .name { color:#222}
#i_banner .txtb .txt_2 .intro { color:#666;
 margin-top: 0.7em; line-height: 1.5; height: 3em;}

#i_banner .txtb .txt_3 {margin: 0 0 0 auto; width:55%; }
#i_banner .txtb .txt_3 .name { color:#222}
#i_banner .txtb .txt_3 .intro { color:#666;
 margin-top: 0.3em; line-height: 1.1; height: 2.2em;}
 #i_banner .txtb .txt_3 .btn { margin-top: 2.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 { bottom: 1.5em; }
#i_banner .swiper-pagination-bullet { width: 0.75em; height: 0.75em;
 background-color: #fff; margin: 0 0.2em;
 filter:alpha(opacity=80);-moz-opacity:0.8; opacity:0.8;
}
#i_banner .swiper-pagination-bullet-active { position: relative; z-index: 0;
	filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;
	 background-color: #0c8494;
}


#i_banner .btnNext,#i_banner .btnPrev { z-index: 10; position: absolute;
right: 5.2%; top: 50%; margin-top: -2.25em;
	cursor: pointer; display: block; cursor: pointer;
	width: 4.5em; height: 4.5em; 
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
	background: url(../images/arrow.png) center center no-repeat;
	background-size:contain;
} 
#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: #fff;
}

#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:1600px) { 
	 #i_banner .pic { padding-top: 43.75%;}
 }
 @media only screen and (max-width:828px) { 
#i_banner .con { width:  90vw; margin: 0 5vw;}
#i_banner .pic { position: relative; z-index: 0; padding-top: 80%;}
#i_banner .txtb { width: 100vw;}
#i_banner .txtb .txt { width: 75%; right: auto; left: 0;}
#i_banner .txtb .txt_2 { width: 100%;}
#i_banner .txtb .txt_3 { width: 45%;  right: 0; left: auto;}
#i_banner .txtb .txt .name { font-size: 5.8vw;}
#i_banner .txtb .txt .intro { margin-top: 0.5em; font-size:3.4vw;}
#i_banner .txtb .txt .btn { font-size: 2.8vw; margin-top: 1.8em;}
#i_banner .num { font-size: 2vw; }
#i_banner .btnNPW  { font-size: 2vw; }
#i_banner .swiper-pagination { font-size: 2vw;}
#i_banner .swiper-pagination-bullet { width: 6px; height: 6px;}

#i_banner .btnNext,#i_banner .btnPrev {
right: 5.2%; top: 50%; margin-top: -1em;
	width: 2em; height: 2em; 
}
}

.inNavBox ul{ display: flex; 
flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.inNavBox li { margin-top: 2.24%; width: 48.88%;}
.inNavBox .pic { padding-top: 94.6%; width: 100%; position: relative; z-index: 0; overflow: hidden;}
.inNavBox .pic img { position: absolute;  z-index: 0;
left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
transition: all 0.5s;
-webkit-transition:all 0.5s;}
.inNavBox .txtb { letter-spacing: 0.05em; position: absolute; z-index: 1;
 top: 0; left: 0; right: 0; margin: 12.5% 6% 6%;
color: #fff;}
.inNavBox .txtb .intro { margin-top: 0.8em;}
.inNavBox .txtb .more { display: inline-block; margin-top: 1.4em; color: #0096aa;
}
.inNavBox .txtb .more::after { content: ""; vertical-align: middle; display: inline-block;
width: 1.22em; height: 1.22em;
background: url(../images/arrow_2.png) center center no-repeat;
background-size:contain ; margin-left: 0.5em;}

.inNavBox li:nth-child(3) .txtb .more{color: #fff;}
.inNavBox li:nth-child(2) .txtb { color: #1d1d1f;}

.inNavBox li:nth-child(3) .txtb .more::after {background-image: url(../images/arrow_3.png)}

.inNavBox li:hover .pic img {-ms-transform: scale(1.03, 1.03);
	-webkit-transform: scale(1.03, 1.03);
	transform: scale(1.03, 1.03);}
	
 @media only screen and (max-width:828px) {  
	 .inNavBox li { margin-top: 1em;  width:100%;}
 }