@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: 94vh;}
#i_banner .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
object-fit: cover;}

#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; right: 7%; color: #fff;bottom:0.6em;}
#i_banner .num span.cur { font-size: 1.6em; font-weight: bold;
 display: inline-block; 
 transform: translate(0,-0.6em);
 -ms-transform: translate(0,-0.6em); /* IE 9 */
 -webkit-transform: translate(0,-0.6em); /* Safari and Chrome */}
#i_banner .num .line { display: inline-block; margin: 0 -0.3em 0 -0.15em;
 width: 2px; height: 2.2em; background-color: #fff;
transform: rotate(24deg);
-ms-transform: rotate(24deg); /* IE 9 */
-webkit-transform: rotate(24deg); /* Safari and Chrome */}
#i_banner .num .total { display: inline-block;
	transform: translate(0,-0.2em);
	-ms-transform: translate(0,-0.2em); /* IE 9 */
	-webkit-transform: translate(0,-0.2em); /* Safari and Chrome */
}
#i_banner .picMask {
	position: absolute; z-index: 9; left: 0; top: 0; width: 100%; height: 100%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+44,0+44,0.8+100 */
	background: radial-gradient(ellipse at center,  
	rgba(0,0,0,0) 0%,rgba(0,0,0,0) 44%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#i_banner .op { position: absolute; z-index: 10; left: 0; top: 0; width: 100%; height: 100%;
display: flex; justify-content: center; align-items: center;
filter:alpha(opacity=0);-moz-opacity:0; opacity:0;
}
#i_banner .op.show {filter:alpha(opacity=100);-moz-opacity:1.0; opacity:1.0;}
#i_banner .op .line { display: block; height: 1px; flex: 1;
 background-color: rgba(255,255,255,0.5); }
#i_banner .op .lineNext { flex: 1; margin: 6em 6em 0 1.5em;
display: flex; justify-content: center; align-items: center;}
#i_banner .op .linePrev { flex: 1; margin: 6em 1.5em 0 6em; 
display: flex; justify-content: center; align-items: center;}
#i_banner .op .indicatorBox { margin-top: 6em; width: 73vh; padding-top: 73vh; position: relative; z-index: 0;}
#i_banner .op .indicator { position: absolute; z-index: 0; top: 0; left: 0;
right: 0; left: 0;}
#i_banner .op #indicator_2 { top: -4px; left: -2px;}

#i_banner .btnNext{ cursor: pointer; margin-left: 0.4em; color: #fff;} 
#i_banner .btnPrev {cursor: pointer; margin-right: 0.4em; color: #fff;}

@media only screen and (max-width:1000px) {
	#i_banner .op .indicatorBox { margin-top: 6em; width: 41vw; padding-top: 41vw;}
}

@media only screen and (max-width:828px) {
	#i_banner .op .lineNext {margin: 6em 1em 0 1em;}
	#i_banner .op .linePrev {  margin: 6em 1em 0 1em; }
}